How to create a bool value for a huge number of CheckboxListTiles?

Question

I build a ListView with ExpansionTiles. These Tiles include a number of CheckboxListTile. I have to handle all the checkboxes, but i dont know how to do this. Can somebody help me pls?

class _HomePageState extends State<HomePage> {
List<String> Test = [];
List<String> Test2 = [];
List<bool> listBool = [];

@override
void initState() {
super.initState();

for(int i = 0; i <= 10; i++)
  {
    Test.add("Test $i");
    Test2.add("Hund $i");
    listBool.add(false);
  }
}

buildCheckBoxListTile() {
  List<Widget> listTile = [];

  for (int i = 0; i < Test2.length; i++)
    listTile.add(
      new CheckboxListTile(
        title: Text(Test2[i]),
        secondary: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            IconButton(
                icon: Icon(Icons.add),
                onPressed: null
            ),
            Text("Count"),
            IconButton(
                icon: Icon(Icons.remove),
                onPressed: null
            ),
          ],
        ),
        value: listBool[i],
        onChanged: (bool value){
          setState(() {
            listBool[i] = value;
          });
        },
        controlAffinity: ListTileControlAffinity.leading,
      ),
    );

return listTile;
}

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Einkauslsite")),
    body: Column(
      children: <Widget>[
        Expanded(
            child: StreamBuilder(
              builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
              return ListView.builder(
                itemCount: Test.length,
                itemBuilder: (context, index){
                  return  ExpansionTile(
                    title: Text(Test[index]),
                    children: buildCheckBoxListTile(),
                  );
                },
              );
            },
          ),
      ),
    ],
  ),
);
}
}

The Streambuilder will i use to read files from firestore. How can i handle these huge number of Checkbox value? I think it going to be 100 or 150. Any Ideas?

Thanks for ur help

Answer 1

For the sake of readability, I really recommend creating some sort of data class that holds data for a single ListView instead of maintaining three separate lists, which might easily get out of sync if you do more stuff with it.

Regarding the "huge number of items": If it's around 100 or 150, that shouldn't be any problem. If the dataset gets really huge (like in the order of tens of thousands), it makes sense to maybe paginate your API. If that's the case, you might want to check out my answer to this question or this one.

To get some inspiration on how to structure your data, check out this code:

class MyItem {
  MyItem({
    @required this.name,
    @required this.subtext,
    this.isSelected = false
  });

  final String name;
  final String subtext;
  bool isSelected;
}

...

class _HomePageState extends State<HomePage> {
  List<MyItem> items = [];

  @override
  void initState() {
    super.initState();

    for (int i = 0; i <= 10; i++) {
      items.add(MyItem(
        name: "Test $i",
        subtext: "Hund $i"
      ));
    }
  }

  Widget _buildItem(MyItem item) {
    return CheckboxListTile(
      title: Text(item.name),
      secondary: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          IconButton(icon: Icon(Icons.add), onPressed: null),
          Text("Count"),
          IconButton(icon: Icon(Icons.remove), onPressed: null),
        ],
      ),
      value: item.isSelected,
      onChanged: (bool value) => setState(() {
        item.isSelected = value;
      }),
      controlAffinity: ListTileControlAffinity.leading,
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Einkaufsliste")),
      body: StreamBuilder(
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          return ListView.builder(
            itemCount: items.length,
            itemBuilder: (ctx, i) => _buildItem(items[i])
          );
        },
      ),
    );
  }
}