database - Build Data Back to ListView Builder [Flutter]

Question

The existing code shows a list of buttons of varying interests. Users can tap to select which interests they prefer.

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.

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), & color of text is Colors.yellow, as seen in the code below.

Let's say user has chosen this list List UserInterests = [ "? Coffee", "?? Theaters", ];

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?

Attached is truncated code:

final List<String> artsInterests = [
  "?? Photography",
  "?? Theaters",
  "??? Exhibitions",
  "?? Architecture",
  "??? Cooking",
  "? Coffee",
  "??? Design",
  "?? Fashion",
  "?? Reading",
  "???? Dance",
  "?? Pottery",
  "?? Drawing",
  "?? Beauty",
  "?? Journalling",
];

StatelessWidget shortened

  final List<String> 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<String> chosenArtsInterests = [];

List<String> UserInterests = [
   "? Coffee",
  "?? Theaters",
];

class Interests2 extends StatefulWidget {
  final AvailableInterestChosen viewInterest;

  Interests2(this.viewInterest);

  String id = 'Interests2';

  @override
  Interests2State createState() => Interests2State();
}

class Interests2State extends State<Interests2> {
  @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 && chosenInterests.length < 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 && chosenInterests.length < 9
                  ? Colors.white
                  : Colors.black),
        ));

    if (widget.viewInterest.isChosen && chosenInterests.length < 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});
}

For the buttons to depict UI that shows they are chosen, my guess is something like

for (string i in UserInterests) setState ((){widget.viewInterest.isChosen})

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!

Answer 1

How about checking the element is in the UserInterests list?

Something like this may work,

            AvailableInterestChosen(
                artsInterests[index],
                isChosen: UserInterests.contains(artsInterests[index]),
            )