title: Build Data Back to ListView Builder [Flutter]
body: <p>The existing code shows a list of buttons of varying interests. Users can tap to select which interests they prefer.</p>
  <p>However, if the user has already selected their interests beforehand and comes back to this page, it's illogical to get the users to choose from a fresh state again.</p>
  <p>I want to repopulate what the users have previously chosen and reflect back on the screen as chosen (which = widget.viewInterest.isChosen). The color of container will be Color(0xff0B84FE), &amp; color of text is Colors.yellow, as seen in the code below.</p>
  <p>Let's say user has chosen this list
  List UserInterests = [
  &quot;☕ Coffee&quot;,
  &quot; Theaters&quot;,
  ];</p>
  <p>QUESTION: How to make containers that contain these strings bool true (which is widget.viewInterest.isChosen), similar to when users have tapped on the respective buttons?</p>
  <p>Attached is truncated code:</p>
  <pre><code>
  final List&lt;String&gt; artsInterests = [
    &quot; Photography&quot;,
    &quot; Theaters&quot;,
    &quot;️ Exhibitions&quot;,
    &quot; Architecture&quot;,
    &quot;‍ Cooking&quot;,
    &quot;☕ Coffee&quot;,
    &quot;️ Design&quot;,
    &quot; Fashion&quot;,
    &quot; Reading&quot;,
    &quot; Dance&quot;,
    &quot; Pottery&quot;,
    &quot; Drawing&quot;,
    &quot; Beauty&quot;,
    &quot; Journalling&quot;,
  ];
  
  StatelessWidget shortened
  
    final List&lt;String&gt; artsInterests;
  
   shortened
                child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    padding: const EdgeInsets.all(1),
                    itemCount: artsInterests.length
                    itemBuilder: (context, int index) {
                      return Interests2(AvailableInterestChosen(
                        artsInterests[index],
                        isChosen: false,
                      ));
                  brackets...
  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    padding: const EdgeInsets.all(1),
                    itemCount: artsInterests.length - 7,
                    itemBuilder: (context, int index) {
                      return Interests2(AvailableInterestChosen(
                        artsInterests[7 + index],
                        isChosen: userChosenInterests
                            .contains(artsInterests[7 + index]),
                      ));
  
  closing brackets...
  
  List&lt;String&gt; chosenArtsInterests = [];
  
  List&lt;String&gt; UserInterests = [
     &quot;☕ Coffee&quot;,
    &quot; Theaters&quot;,
  ];
  
  class Interests2 extends StatefulWidget {
    final AvailableInterestChosen viewInterest;
  
    Interests2(this.viewInterest);
  
    String id = 'Interests2';
  
    @override
    Interests2State createState() =&gt; Interests2State();
  }
  
  class Interests2State extends State&lt;Interests2&gt; {
    @override
    Widget build(BuildContext context) {
      final height = MediaQuery.of(context).size.height;
      final width = MediaQuery.of(context).size.width;
      Container container = Container(
  
         decoration shortened
  
          decoration: BoxDecoration(
            color: widget.viewInterest.isChosen &amp;&amp; chosenInterests.length &lt; 9
                ? Color(0xff0B84FE)
                : Colors.white.withOpacity(0.87),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.69),
                spreadRadius: 1,
                blurRadius: 3,
                offset: Offset(0, 1), // changes position of shadow
              ),
            ],
            borderRadius: BorderRadius.circular(9),
          ),
          child: Text(
            '${widget.viewInterest.title}',
            style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.w600,
                color: widget.viewInterest.isChosen &amp;&amp; chosenInterests.length &lt; 9
                    ? Colors.white
                    : Colors.black),
          ));
  
      if (widget.viewInterest.isChosen &amp;&amp; chosenInterests.length &lt; 9) {
        chosenArtsInterests.add('${widget.viewInterest.title}');
       
  
        print(chosenArtsInterests);
      } else {
        chosenArtsInterests.remove('${widget.viewInterest.title}');
      
        print(chosenArtsInterests);
      }
      return GestureDetector(
        onTap: () {
          setState(() {
            widget.viewInterest.isChosen = !widget.viewInterest.isChosen;
          });
        },
        child: container,
      );
    }
  }
  
  class AvailableInterestChosen {
    bool isChosen;
    String title;
  
    AvailableInterestChosen(this.title, {this.isChosen = false});
  }
  
  </code></pre>
  <p>For the buttons to depict UI that shows they are chosen, my guess is something like</p>
  <pre><code>for (string i in UserInterests) setState ((){widget.viewInterest.isChosen})
  </code></pre>
  <p>But in regards to where to put it or the exact code, I'm lost. If anyone has some experience or similar resources to share so I can read on it, that will be great!</p>