Have a visual look here

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);
      }));*/
},
1

There are 1 answers

0
Paolo068 On

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