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),
]);
},
);
},
),
>Solution :
you could use the StatefulBuilder widget above the wrap and thus only update the state within it and not the entire modal