How to generate two different lists dynamically in flutter

Question

I'm trying to implement a toggle button in flutter based on a list received from API. What I want is a list to be generated in loop so that the first round in the loop generate a list with the isFirstSelected[index] = [true, false], and the second round would be something like this based on the list that I have from the API, isFirstSelected[index] = [true, false, false]. My code is below. My real issue is that the ToggleButtons widget that is been generated is not updating when selected, and I think that's how can I solve it to make the selection, But I can't generate the lists. My first code below is the generated toggle buttons but the selection is not updating the widgets and my second code is trying with generating the dynamic lists I talked about at the beginning.

StreamBuilder(
                          stream: varientBloc.allVarients,
                          builder: (context, AsyncSnapshot<Varient> snapshot) {
                            if (snapshot.hasData) {
                              price =
                                  snapshot.data.data.regularPrice.formatedPrice;
                              return Column(
                                children: List.generate(
                                    snapshot.data.data.attributes.length,
                                    (xnIndex) {
                                  List<bool> isFirstSelected = List.generate(
                                      snapshot.data.data.attributes[xnIndex]
                                          .options.length,
                                      (_) => false);
                                  return Column(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.only(
                                            right: 8, left: 8),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .options
                                                      .length
                                                      .toString() +
                                                  ' ' +
                                                  snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .label,
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold),
                                            ),
                                            Icon(Icons.arrow_right)
                                          ],
                                        ),
                                      ),
                                      SingleChildScrollView(
                                        scrollDirection: Axis.horizontal,
                                        child: ToggleButtons(
                                          borderColor: Colors.transparent,
                                          fillColor: Colors.transparent,
                                          selectedBorderColor:
                                              Colors.transparent,
                                          children: List.generate(
                                              snapshot
                                                  .data
                                                  .data
                                                  .attributes[xnIndex]
                                                  .options
                                                  .length, (index) {
                                            return Card(
                                              elevation: 3,
                                              color:
                                                  isFirstSelected[index] == true
                                                      ? Colors.red
                                                      : Colors.red[200],
                                              shape: RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          50.0)),
                                              child: Padding(
                                                padding:
                                                    const EdgeInsets.fromLTRB(
                                                        14.0, 10.0, 14.0, 10.0),
                                                child: Text(
                                                  snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .options[index]
                                                      .label,
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                ),
                                              ),
                                            );
                                          }),

                                          // logic for button selection below
                                          onPressed: (int index) {
                                            setState(() {
                                              for (int i = 0;
                                                  i < isFirstSelected.length;
                                                  i++) {
                                                isFirstSelected[i] = i == index;
                                              }
                                              print('the index');
                                              print(index);
                                            });
                                          },
                                          isSelected: isFirstSelected,
                                        ),
                                      )
                                    ],
                                  );
                                }),
                              );
                            } else if (snapshot.hasError) {
                              return Padding(
                                padding: const EdgeInsets.fromLTRB(
                                    0.0, 5.0, 0.0, 5.0),
                                child: SliverToBoxAdapter(
                                  child: Text(
                                      'AppLocalizations.of(context).sorry_something_wrong_happened'),
                                ),
                              );
                            }
                            return Padding(
                              padding:
                                  const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
                              child: Container(
                                child: Center(
                                    child: Shimmer.fromColors(
                                        baseColor: Colors.grey[300],
                                        highlightColor: Colors.grey[100],
                                        child: Column(
                                          children: [Text('data')],
                                        ))),
                              ),
                            );
                          }),
                

Second code generating two different lists:

StreamBuilder(
                          stream: varientBloc.allVarients,
                          builder: (context, AsyncSnapshot<Varient> snapshot) {
                            if (snapshot.hasData) {
                              price =
                                  snapshot.data.data.regularPrice.formatedPrice;
                              return Column(
                                children: List.generate(
                                    snapshot.data.data.attributes.length,
                                    (xnIndex) {
                                  List<bool> isFirstSelected[xnIndex] = List<bool>.generate(
                                      snapshot.data.data.attributes[xnIndex]
                                          .options.length,
                                      (_) => false);
                                  print('isFirstSelected');
                                  print(isFirstSelected);
                                  return Column(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.only(
                                            right: 8, left: 8),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .options
                                                      .length
                                                      .toString() +
                                                  ' ' +
                                                  snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .label,
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold),
                                            ),
                                            Icon(Icons.arrow_right)
                                          ],
                                        ),
                                      ),
                                      SingleChildScrollView(
                                        scrollDirection: Axis.horizontal,
                                        child: ToggleButtons(
                                          borderColor: Colors.transparent,
                                          fillColor: Colors.transparent,
                                          selectedBorderColor:
                                   

Answer 1

The solution is to make a list of list

List<List> isFirstSelected = new List(snapshot.data.data.attributes.length);

StreamBuilder(
                          stream: varientBloc.allVarients,
                          builder: (context, AsyncSnapshot<Varient> snapshot) {
                            if (snapshot.hasData) {
                              List<List<bool>> isFirstSelected = new List(
                                  snapshot.data.data.attributes.length);
                              print('isFirstSelected.length');
                              print(isFirstSelected.length);
                              price =
                                  snapshot.data.data.regularPrice.formatedPrice;
                              return Column(
                                children: List.generate(
                                    snapshot.data.data.attributes.length,
                                    (xnIndex) {
                                  isFirstSelected[xnIndex] = List.generate(
                                      snapshot.data.data.attributes[xnIndex]
                                          .options.length,
                                      (_) => false);
                                  print('isFirstSelected');
                                  print(isFirstSelected);
                                  return Column(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.only(
                                            right: 8, left: 8),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .options
                                                      .length
                                                      .toString() +
                                                  ' ' +
                                                  snapshot
                                                      .data
                                                      .data
                                                      .attributes[xnIndex]
                                                      .label,
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold),
                                            ),
                                            Icon(Icons.arrow_right)
                                          ],
                                        ),
                                      ),
                                      ToggleButtonGenerator(
                                          snapshot: snapshot,
                                          xnIndex: xnIndex,
                                          isFirstSelected: isFirstSelected)
                                    ],
                                  );
                                }),
                              );
                            } else if (snapshot.hasError) {
                              return Padding(
                                padding: const EdgeInsets.fromLTRB(
                                    0.0, 5.0, 0.0, 5.0),
                                child: SliverToBoxAdapter(
                                  child: Text(
                                      'AppLocalizations.of(context).sorry_something_wrong_happened'),
                                ),
                              );
                            }
                            return Padding(
                              padding:
                                  const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
                              child: Container(
                                child: Center(
                                    child: Shimmer.fromColors(
                                        baseColor: Colors.grey[300],
                                        highlightColor: Colors.grey[100],
                                        child: Column(
                                          children: [Text('data')],
                                        ))),
                              ),
                            );
                          }),



class ToggleButtonGenerator extends StatefulWidget {
  final AsyncSnapshot<Varient> snapshot;
  final int xnIndex;

  const ToggleButtonGenerator({
    Key key,
    @required this.snapshot,
    @required this.xnIndex,
    @required this.isFirstSelected,
  }) : super(key: key);

  final List<List<bool>> isFirstSelected;

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

class _ToggleButtonGeneratorState extends State<ToggleButtonGenerator> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: ToggleButtons(
        borderColor: Colors.transparent,
        fillColor: Colors.transparent,
        selectedBorderColor: Colors.transparent,
        children: List.generate(
            widget.snapshot.data.data.attributes[widget.xnIndex].options.length,
            (index) {
          return Card(
            elevation: 3,
            color: widget.isFirstSelected[widget.xnIndex][index] == true
                ? Colors.red
                : Colors.red[200],
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50.0)),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(14.0, 10.0, 14.0, 10.0),
              child: Text(
                widget.snapshot.data.data.attributes[widget.xnIndex]
                    .options[index].label,
                style:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
          );
        }),

        // logic for button selection below
        onPressed: (int index) {
          setState(() {
            for (int i = 0;
                i < widget.isFirstSelected[widget.xnIndex].length;
                i++) {
              widget.isFirstSelected[widget.xnIndex][i] = i == index;
            }

            print('the attributes ID');
            print(widget.snapshot.data.data.attributes[widget.xnIndex].id);
            print('the Selected ID');
            print(widget.snapshot.data.data.attributes[widget.xnIndex]
                .options[index].id);

            for (var indexID in widget.snapshot.data.data.index.entries) {
              if (indexID.key ==
                  widget.snapshot.data.data.attributes[widget.xnIndex].id) {
                print('indexID');
                print(indexID);
              }
            }
          });
        },
        isSelected: widget.isFirstSelected[widget.xnIndex],
      ),
    );
  }
}