Understanding persistence

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