We are trying to update a switch tile within a modal bottom and I suspect this is effecting the state somehow but I am not sure how to resolve this issue.

ListTile(
                  title: const Text('Transactional'),
                  subtitle: const Text('Email, Push, SMS'),
                  trailing: Icon(Icons.adaptive.arrow_forward),
                  onTap: () {
                    HapticFeedback.lightImpact();
                    showModalBottomSheet(
                      barrierColor: Colors.black.withOpacity(0.5),
                      enableDrag: true,
                      shape: const RoundedRectangleBorder(
                          borderRadius:
                              BorderRadius.vertical(top: Radius.circular(20))),
                      context: context,
                      builder: (context) {
                        // Using Wrap makes the bottom sheet height the height of the content.
                        // Otherwise, the height will be half the height of the screen.
                        return Wrap(alignment: WrapAlignment.center, children: [
                          bottomSheetBar(),
                          ListTile(
                            title: Text('Transactional',
                                style: Theme.of(context).textTheme.titleLarge),
                          ),
                          ListTile(
                            title: Text(
                                'Recieve important notifications about any payments, cancellations and about your acccount.',
                                style: Theme.of(context).textTheme.bodyMedium),
                          ),
                          SwitchListTile(
                            title: const Text('Push'),
                            value: _push,
                            onChanged: (bool value) {
                              setState(() {
                                _push = value;
                              });
                            },
                            // secondary: const Icon(Icons.lightbulb_outline),
                          ),
                          SwitchListTile(
                            title: const Text('Email'),
                            value: _email,
                            onChanged: (bool value) {
                              setState(() {
                                _email = value;
                              });
                            },
                            // secondary: const Icon(Icons.lightbulb_outline),
                          ),
                          SwitchListTile(
                            title: const Text('SMS'),
                            value: _sms,
                            onChanged: (bool value) {
                              setState(() {
                                _sms = value;
                              });
                            },
                            // secondary: const Icon(Icons.lightbulb_outline),
                          ),
                          ElevatedButton(
                              onPressed: () {}, child: const Text('Done')),
                          const SizedBox(height: 20),
                        ]);
                      },
                    );
                  },
                ),

CodePudding user response：

you could use the StatefulBuilder widget above the wrap and thus only update the state within it and not the entire modal