title: Dynamic List in Flutter using SharedPreferences
body: <blockquote>
  <p>Hello, I'm trying to make an app where I can store data inputted by the user like this one. My task is to use SharedPreferences to store the data.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/RsoMF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RsoMF.jpg" alt="Main Screen" /></a></p>
  <blockquote>
  <p>I used SharedPreferences to save the data in a List</p>
  </blockquote>
  <pre><code>saveData() async {
  List&lt;String&gt; itemData = [];
  itemData.add(fstcontroller.text);
  itemData.add(sndcontroller.text);
  itemData.add(trdcontroller.text);
  itemData.add(fthcontroller.text);
  
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setStringList(&quot;item&quot;, itemData);
  }
  </code></pre>
  <blockquote>
  <p>I have 2 problems,
  First Problem: whenever I click the Show Cart button, it shows this one</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/I9cAs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I9cAs.jpg" alt="Second Screen" /></a></p>
  <blockquote>
  <p>I don't want to display like this, I want to only display the &quot;Item Brand&quot;, the rest will not be displayed.
  Then, if I click the cell, it will display the full details of the item in the third screen.</p>
  </blockquote>
  <blockquote>
  <p>here's the SecondScreen</p>
  </blockquote>
  <pre><code>class SecondScreen extends StatefulWidget {
      @override
      State createState() =&gt; new DynamicList();
   }
  
  class DynamicList extends State&lt;SecondScreen&gt; {
    List&lt;String&gt; listItems = [];
  
    @override
    void initState() {
      super.initState();
      getUser();
   }
  
   getUser() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      var itemData = prefs.getStringList(&quot;item&quot;);
      setState(() {
        listItems = itemData;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        body: Column(
          children: &lt;Widget&gt;[
            Expanded(
              child: ListView.builder(
                  itemCount: listItems.length, itemBuilder: buildList),
            )
          ],
        ),
      );
    }
  
    Widget buildList(BuildContext context, int index) {
      return Container(
        margin: EdgeInsets.all(4),
        decoration: BoxDecoration(
            border: Border.all(
              color: Colors.black,
              width: 2,
            ),
            borderRadius: BorderRadius.circular(5)),
        child: ListTile(
          title: Text(listItems[index]),
        ),
      );
    }
    }
  </code></pre>
  <blockquote>
  <p>Second problem: Whenever I add multiple data, the data doesn't stack. It only replaces the data.</p>
  </blockquote>