CODEWITHSUNDEEP
listflutteruser-interfacedartcheckbox
Blank
Blank

Reputation: 21

Rendering checkboxes through a loop

void filterList(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (bContext) {
      return FilterList();
    },
  );
}// creating a bottom modal sheet

class FilterList extends StatefulWidget {
  @override
   _FilterListState createState() => _FilterListState();
}//creating a state for checkboxes

class _FilterListState extends State<FilterList> {
  int i; 
  bool checkvalue = false;
  Widget _element(String id) {
    return Row(
      children: <Widget>[
        Checkbox(
          value: checkvalue,
          onChanged: (value) {
            setState(
              () {
                checkvalue = value;
              },
            );
          },
        ),
        Text('$id')
      ],
    );
  }// A new Widget where I get to combine the checkboxes with their respective texts

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[for (i = 10; i <= 120; i = i + 10) _element('$i HP')],
// for loop for iterating the widget rendering
//HP stands for horsepower...
    );
  }
}

so, I tried to render checkboxes using a 'for loop' while creating a filter UI, inside a bottom modal sheet. Here, when I tried to change the state of one checkbox, all of the other checkboxes also get their states changed. Is there a way where i get to retain the for loop but, only change the state of the selected checkboxes? or, do I have to give up on the loop and hardcode all the way?

Upvotes: 1

Views: 395

Answers (1)

Mobina
Mobina

Reputation: 7119

You need to store all the checkvalues in a List:

class FilterList extends StatefulWidget {
  @override
  _FilterListState createState() => _FilterListState();
} //creating a state for checkboxes

class _FilterListState extends State<FilterList> {
  int i;
  List<bool> checkvalue = new List<bool>.filled(12, false); // this is new
  Widget _element(String id, int index) { // index added
    return Row(
      children: <Widget>[
        Checkbox(
          value: checkvalue[index], // [index] added
          onChanged: (value) {
            setState(
              () {
                checkvalue[index] = value; // [index] added
              },
            );
          },
        ),
        Text('$id')
      ],
    );
  } // A new Widget where I get to combine the checkboxes with their respective texts

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        for (i = 10; i <= 120; i = i + 10) _element('$i HP', i ~/ 10 - 1) // index added
      ],
// for loop for iterating the widget rendering
//HP stands for horsepower...
    );
  }
}

Upvotes: 2

Related Questions