sMBS = showModalBottomSheet
I am using riverpod 2 to manage the state of my flutter food delivery app. But I encountered some issues trying to get the state at different scope inside a sMBS. Yet I know that Widget like sMBS are not part of the main widget's tree.
I have managed how to increase or dicrease the number of item to order by using riverpod Consumer function everywhere I needed to manage a state. But it just helped partially. When I want to add some addons (FilterChip widget in the code) to the item for the price to change by tapping on it, the change are not instant. I mean to see some state change I need to dispose and call back the sMBS by tapping again on one item in the list. Have a visual look here
onTap: () {
Log.error('Tapped');
showModalBottomSheet(
isScrollControlled: true,
useRootNavigator: true,
backgroundColor: Colors.white,
useSafeArea: true,
context: context,
builder: (context) {
return Consumer(
builder: (context, ref, child) {
final cartItemQty = ref.watch(cartQtyProvider);
// int addonLength = ref.watch(cartAddonListProvider).length;
Log.error('message====> ${addonList.length}');
int productPrice = product[index].price * cartItemQty;
return Wrap(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Image.network(
'http://localhost:8055/assets/${product[index].image}',
width: 50,
height: 50,
),
Text(product[index].name, style: AppStyles.headLineText),
const Gap(20),
Row(
children: [
AppIconBtn(
onPressed: cartItemQty <= 1 ? null : onQtyRemove,
icon: const Icon(Icons.remove),
),
SizedBox(
width: 35,
height: 35,
child: Center(
child: Text('$cartItemQty',
style: AppStyles.headLineText
.copyWith(fontWeight: FontWeight.normal)),
),
),
AppIconBtn(
onPressed: onQtyAdd,
icon: const Icon(Icons.add),
),
const Spacer(),
Consumer(
builder: (context, ref, child) {
return Text.rich(TextSpan(
style: GoogleFonts.robotoMono(
fontSize: 26, color: Pallete.darkBlue),
text: '$productPrice ',
children: [
TextSpan(
text: ' FCFA',
style: AppStyles.bodyText.copyWith(fontSize: 15),
)
]));
},
),
],
),
],
),
),
const Divider(),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(
'Contenu:',
style: AppStyles.headLineText.copyWith(
fontSize: 20,
),
),
Text(
style: const TextStyle(fontSize: 17),
product[index]
.description
.toString()
.substring(1, product[index].description.toString().length - 1),
),
const Gap(10),
Text(
'Additionnel:',
style: AppStyles.headLineText.copyWith(
fontSize: 20,
),
),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Consumer(
builder: (context, ref, child) {
bool isAddonSelected = ref.watch(cartAddonProvider);
return FilterChip(
checkmarkColor: Pallete.orange,
selected: isAddonSelected,
onSelected: (value) {
ref.read(cartAddonProvider.notifier).state = value;
value
? ref
.watch(cartAddonListProvider.notifier)
.state
.add('Meat')
: ref
.watch(cartAddonListProvider.notifier)
.state
.remove('Meat');
Log.error(addonList.length);
},
label: const Text('Viande'),
);
},
),
],
),
Row(children: [
CircleAvatar(
backgroundColor: Pallete.lightOrange,
radius: 25,
child: Icon(
Icons.favorite_outline_rounded,
color: Pallete.orange.withOpacity(0.5),
),
),
const Gap(15),
Expanded(
child: AppButton(
onPressed: () {
addToCart(product[index].name, product[index].price,
product[index].image, cartItemQty, addonList);
},
text: 'Add to cart',
),
),
])
]),
)
]);
},
);
}); /*.then((_) => Timer(const Duration(seconds: 1), () {
ref.invalidate(cartQtyProvider);
}));*/
},
I finally figured out how to deal with that. thanks to all. Just declared a notifier provider with two method to add and remove addons on click. code snap