I am trying to list out a few texts after a bottom sheet opens, this is dynamic and comes from an API. Once the bottom sheet function is triggered, the API is called and the list view updates. In this list view I used CheckboxListTile, the problem is I am not able to do multiple selections (nor single select) on the checkboxes.

This is what I have so far:

var selectedIndex = [];

The above code is in the _MainScreenState and the function for the bottom screen is triggered in one of the buttons as:

...
onPressed: () {
     _showModalBottomSheet(context).then((value) => setState(() {
           index = value;
     }));
 }
...

Bottom sheet code

Future<AllApps?> _showModalBottomSheet(BuildContext context) {
    return showModalBottomSheet<AllApps>(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(20),
          ),
        ),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return FractionallySizedBox(
            heightFactor: 0.9,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(150.0, 20.0, 150.0, 20.0),
                  child: Container(
                    height: 8.0,
                    width: 80.0,
                    decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                  ),
                ),
                FutureBuilder<AllApps>(
                  future: getAllApps(),  // <- API call
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return ListView.builder(
                        shrinkWrap: true,
                        physics: const ScrollPhysics(),
                        itemCount: snapshot.data?.data.length,
                        itemBuilder: (context, index) {
                          final app = snapshot.data?.data[index];
                          return CheckboxListTile(
                            enableFeedback: true,
                            title: Text(app!.name),
                            value: selectedIndex.contains(app.id),
                            onChanged: (_) {
                              if (selectedIndex.contains(app.id)) {
                                setState(() {
                                  selectedIndex.remove(app.id);
                                });
                              } else {
                                setState(() {
                                  selectedIndex.add(app.id);
                                });
                              }
                            },
                          );
                        },
                      );
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }
                    return const Center(child: CircularProgressIndicator());
                  },
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0, right: 5.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 8.0),
                        child: ElevatedButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                      ),
                      ElevatedButton(
                        child: const Text('Save'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        });
  }

I am able to see the lists being built but I am not able to select any one of them (gif screenshot):

How should I enable multiple selections?

CodePudding user response：

You can use StatefulBuilder for providing setState in bottom sheet. Try as follows:

return StatefulBuilder(
builder:(BuildContext context,setState){
return FractionallySizedBox(....);
})

CodePudding user response：

In order to apply changes in the state to the modal, use StateFulBuilder:

showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  builder: (context) {
                    return StatefulBuilder(  // this is new
                        builder: (BuildContext context, StateSetter setState) {
                      return FractionallySizedBox(
            heightFactor: 0.9,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(150.0, 20.0, 150.0, 20.0),
                  child: Container(
                    height: 8.0,
                    width: 80.0,
                    decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                  ),
                ),
                FutureBuilder<AllApps>(
                  future: getAllApps(),  // <- API call
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return ListView.builder(
                        shrinkWrap: true,
                        physics: const ScrollPhysics(),
                        itemCount: snapshot.data?.data.length,
                        itemBuilder: (context, index) {
                          final app = snapshot.data?.data[index];
                          return CheckboxListTile(
                            enableFeedback: true,
                            title: Text(app!.name),
                            value: selectedIndex.contains(app.id),
                            onChanged: (_) {
                              if (selectedIndex.contains(app.id)) {
                                setState(() {
                                  selectedIndex.remove(app.id);
                                });
                              } else {
                                setState(() {
                                  selectedIndex.add(app.id);
                                });
                              }
                            },
                          );
                        },
                      );
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }
                    return const Center(child: CircularProgressIndicator());
                  },
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0, right: 5.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 8.0),
                        child: ElevatedButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                      ),
                      ElevatedButton(
                        child: const Text('Save'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                )
              ],
            ),
              );
});
});