CODEWITHSUNDEEP
androidiosflutterdartflutter-getx
Alif Al-Gibran
Alif Al-Gibran

Reputation: 1246

Widget doesn't update when call update() in bottomsheet GetX Library

enter image description here

When click the icons add and remove the item wont update, even though I have called the update() function in controller()

Here's the code I call the Bottomsheet:

Get.bottomSheet(VariantBs(cartItems: cartItem));

Here's the view of bottom sheet:

Row(
                          children: [
                            GestureDetector(
                              onTap: () {
                                if (amount == 1) {
                                  _dx.deleteItem(cartItems[i].itemId);
                                } else {
                                  _dx.updateQty(cartItems[i].itemId,
                                      cartItems[i].qty - 1);
                                }
                              },
                              child: Icon(
                                Icons.remove_circle,
                                color: AppColor.orange,
                                size: 34,
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.symmetric(
                                  horizontal: 14, vertical: 0),
                              child: Text(
                                cartItems[i].qty.toString(),
                                style: AppFont.lexendSemiB14Primary,
                              ),
                            ),
                            GestureDetector(
                              onTap: () {
                                _dx.updateQty(
                                    cartItems[i].itemId, cartItems[i].qty + 1);
                               
                              },
                              child: Icon(
                                Icons.add_circle,
                                size: 34,
                                color: AppColor.orange,
                              ),
                            ),
                            const Spacer(),
                            Text(() {
                              final fmt = MoneyFormatter(
                                  settings: MoneyFormatterSettings(
                                    thousandSeparator: '.',
                                    decimalSeparator: ',',
                                  ),
                                  amount: double.parse(amount.toString()));
                              return 'Rp${fmt.output.withoutFractionDigits}';
                            }(), style: AppFont.lexendMedium14),
                          ],
                        ),

And the function in controller:

 updateQty(int itemId, int qty) async {
    final api = await _brofoodRepository.updateQty(itemId, qty);

    return api.fold((error) => Get.snackbar('Terjadi Kesalahan', error.data),
        (response) {
      getCart();
      update();
    });
  }


 getCart() async {
    final api = await _brofoodRepository.getCart();

    return api.fold((error) => Get.snackbar('Terjadi Kesalahan', error.data),
        (response) {
      if (response.merchantName == "") {
        cart.value = Cart();
      } else {
        cart.value = response;
        totalItems.value = 0;
        totalPrice.value = 0;
        for (var element in cart.value.cartItems) {
          totalItems.value += element.qty;
          totalPrice.value += element.price * element.qty;
          if (element.variants == null) {
          } else {
            for (var x in element.variants!) {
              for (var y in x.options) {
                totalPrice.value += y.price * element.qty;
              }
            }
          }
        }
      }
      update();
    });
  }

But when i reopen the bottomsheet the new value of item is appeared.

Any ideas of the issues? thank you.

Upvotes: 1

Views: 2451

Answers (3)

amin eslami
amin eslami

Reputation: 21

You should use the Obx() function in Get.bottomSheet to ensure that your variables get updated.

Get.bottomSheet(Obx(() => VariantBs(cartItems: cartItem)));

Upvotes: 1

Mohamed Saleh
Mohamed Saleh

Reputation: 3317

I have faced the same issue, which is described by Getx's author in the following issue

Flutter does not reconstruct all children of a widget, so you have two options: 1- Use dropdown outside the modal. 2- Encapsulate the widget you want to be changed and not the modal by a GetBuilder.

So I have used showModalBottomSheet instead of Get.bottomSheet as described in the following answer

showModalBottomSheet(
context: context,
builder: (context) {
  return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {
    return Container(
      height: heightOfModalBottomSheet,
      child: RaisedButton(onPressed: () {
        setState(() {
          heightOfModalBottomSheet += 10;
        });
      }),
    );
  });
});

So I ended up using:

  • setState for updating the bottomsheet
  • MY_VIEW_CONTROLLER for updating selected value in the parent view

Upvotes: 0

S. M. JAHANGIR
S. M. JAHANGIR

Reputation: 5060

You need to use GetBuilder in order to update the screen:

GetBuilder<YourController>(
  builder:(controller)=> Text(
                            controller.cartItems[i].qty.toString(),
                            style: AppFont.lexendSemiB14Primary,
                          ),
)

Upvotes: 1

Related Questions