Hi,
I’m new to UI Programming/ App development.
My goal is it to have a screen/page/whatever on which one can arrange different Widgets.
Of course this “layout” should be saved in some way but I have no clue how.
This is the page on which you can arrange the widgets:
const MyDesign({Key key,this.designName}):super(key: key);
final String designName;
@override
_MyDesignState createState() => _MyDesignState();
}
class _MyDesignState extends State<MyDesign> {
List<Widget> movableItems = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.designName),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
movableItems.add(MoveableStackItem(item: Knob(),));
});
}
),
body: Stack(
children:
movableItems,
),
);
}
}
As you can see I use a List to store my movable objects and a Stack to draw them.
Is there any possibility to store this List of widgets for a specific instance of this page and retrieve it after closing the app?
I also want to have the possibility to create multiple “layouts” heres my approach:
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<MyDesign> myDesignPages = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
final String dname = (await _asyncInputDialog(context)) as String;
setState(() {
myDesignPages.add(new MyDesign(designName: dname,));
});
},
child: Icon(Icons.add),
),
body:
new ListView.builder(
itemCount: myDesignPages.length,
itemBuilder: (BuildContext context, int i){
return ListTile(
title: Text(myDesignPages[i].designName),
onTap: () {
Navigator.push<dynamic>(
context,
MaterialPageRoute<dynamic>(
builder: (context) => myDesignPages[i]) );
},
);
}
),
);
}
}
I assume that I’m quite off the track here. For that I’m happy place like this exist.
Thanks a lot