skip to Main Content

I’m very new in Flutter (and programing).

I have a BottomSheet that cointains ChoiceChips and some Switches. It all works great but when I close the BottomSheet it does not save the state of the switches and the choice chips.
I’m trying to find a way to keep my choices and the switches state even when I close the BottomSheet.

2

Answers


  1. To save data even when closing the BottomSheet is to save user data such as the values the user selected to do that You must save the data in the parent widget if you’re not using any kind of state management like Provider and flutter_bloc, etc
    this code will give you a good example of how to do that, then you can use your customization in the code

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Bottom Sheet Demo',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      List<String> selectedChips = [];
      bool switchValue = false;
    
      final chipOptions = ['Item 1', 'Item 2', 'Item 3'];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: ElevatedButton(
              child: Text('Open BottomSheet'),
              onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Wrap(
                            children: chipOptions.map((item) {
                              return ChoiceChip(
                                label: Text(item),
                                selected: selectedChips.contains(item),
                                selectedColor: Colors.green,
                                onSelected: (selected) {
                                  setState(() {
                                    selected
                                        ? selectedChips.add(item)
                                        : selectedChips.remove(item);
                                  });
                                },
                              );
                            }).toList(),
                          ),
                          Switch(
                            value: switchValue,
                            onChanged: (value) {
                              setState(() {
                                switchValue = value;
                              });
                            },
                          ),
                          ElevatedButton(
                            child: Text('Close'),
                            onPressed: () {
                              Navigator.pop(context);
                            },
                          )
                        ],
                      );
                    });
              },
            ),
          ),
        );
      }
    }
    

    If my answer helps don’t forget to vote 🙏️ and make it the accepted answer

    Login or Signup to reply.
  2. Adding Single line to Faisal Faraj Answer

    Wraping Choice Chip with Stateful Builder to rebuild showModalBottomSheet for refreshing selection

    ElevatedButton(
              child: Text('Open BottomSheet'),
              onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Wrap(
                            children: chipOptions.map((item) {
                              return StatefulBuilder(
                                builder: (BuildContext context, void Function(void Function()) setState) {
                                 return  ChoiceChip(
                                    label: Text(item),
                                    selected: selectedChips.contains(item),
                                    selectedColor: Colors.green,
                                    onSelected: (selected) {
                                      setState(() {
                                        selected
                                            ? selectedChips.add(item)
                                            : selectedChips.remove(item);
                                      });
                                    },
                                  );
                                },
    
                              );
                            }).toList(),
                          ),
                           Switch(
                             value: switchValue,
                             onChanged: (value) {
                               setState(() {
                                 switchValue = value;
                               });
                             },
                           ),
                          ElevatedButton(
                            child: Text('Close'),
                            onPressed: () {
                              Navigator.pop(context);
                            },
                          )
                        ],
                      );
                    });
              },
            )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search