flutterbottom-sheetpersist

How I keep data inside BottomSheet Flutter when I close it?


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.


Solution

  • 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