mercredi 12 août 2020

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?




Aucun commentaire:

Enregistrer un commentaire