Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter getX not updating UI after ading items to obs list

I’m using GetX to manage the state of my ecommerce app, and I’m stuck with the shopping cart.

I’m using Sqflite package to store carts locally.

issue: when i add a product to cart list it’s not updating it automatically untill i restart the app i see the added items

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Cart controller

      addProductToCart(ProductModel product) async {
        List<Map> items =
            await _repository.getLocalByCondition('carts', 'productId', product.id);
        if (items.length > 0) {
          product.quantity = items.first['productQuantity'] + 1;
          return await _repository.updateLocal(
              'carts', 'productId', product.toMap());
        }
    
        product.quantity = 1;
        return await _repository.saveLocal('carts', product.toMap());
      }
    
      
    
      @override
      void onInit() {
        super.onInit();
        getCarts();
      }


 

Add to cart product details

  _addToCart(BuildContext context, ProductModel product) async {
    int result = await _cartController.addProductToCart(product);
    if (result > 0) {
      Fluttertoast.showToast(msg: 'Item added to cart successfully!');
    } else {
      Fluttertoast.showToast(msg: 'Error to add product!');
    }
  }

Cart screen

Obx(() {
      return Scaffold(
          appBar: AppBar(
              title: Text('Cart (${_cartController.cartList.length} items)',
                  style: TextStyle(color: Colors.black))),
          bottomNavigationBar: InkWell(
              onTap: () {
                //_checkout(_cartController.cartList);
              },
              child: Container(
                color: Colors.black,
                height: 55,
                margin: EdgeInsets.all(8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Checkout',
                      style: TextStyle(color: Colors.white),
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    Text(
                      'ÂŁ' + _cartController.total.toString(),
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
              )),
          body: _cartController.loading.isTrue
              ? Center(child: CircularProgressIndicator())
              : _cartController.cartList.length > 0
                  ? ListView.builder(
                      padding:
                          EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                      itemBuilder: (context, index) {
                        return Dismissible(
                          key: Key(this
                              ._cartController
                              .cartList[index]
                              .id
                              .toString()),
                          onDismissed: (val) async {
                          var x=  await _cartController.deleteCartItem(
                                index, this._cartController.cartList[index].id);
                                if(x!>0)        Fluttertoast.showToast(msg: 'deleted');
                                else{        Fluttertoast.showToast(msg: x.toString());
}

                          },
                          background: Container(
                              child: Align(
                                  alignment: Alignment.centerRight,
                                  child: Padding(
                                    padding: const EdgeInsets.only(right: 28.0),
                                    child: Icon(
                                      Icons.delete_outline_outlined,
                                      size: 36,
                                      color: Colors.white,
                                    ),
                                  )),
                              color: Colors.redAccent),
                          child: Card(
                            elevation: 5,
                            shape: OutlineInputBorder(
                                borderRadius: BorderRadius.all(
                              Radius.circular(7),
                            )),
                            child: Container(
                              margin: EdgeInsets.all(4),
                              height: 120,
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 3,
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(5),
                                          topRight: Radius.circular(5)),
                                      child: Image.network(
                                        _cartController.cartList[index].photo,
                                        width: 150,
                                        height: 120,
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                      flex: 5,
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Text(
                                              _cartController
                                                  .cartList[index].name,
                                              overflow: TextOverflow.clip,
                                              style: TextStyle(
                                                  fontWeight: FontWeight.w500,
                                                  fontSize: 16),
                                            ),
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Text(
                                              '${_cartController.cartList[index].price - _cartController.cartList[index].discount} ' +
                                                  " x " +
                                                  _cartController
                                                      .cartList[index].quantity
                                                      .toString(),
                                              style: TextStyle(
                                                  fontWeight: FontWeight.w500),
                                            ),
                                          ),
                                        ],
                                      )),
                                  Expanded(
                                      child: Column(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      IconButton(
                                        icon: Icon(Icons.keyboard_arrow_up),
                                        onPressed: () {
                                          _cartController.total.value += this
                                                  ._cartController
                                                  .cartList[index]
                                                  .price -
                                              this
                                                  ._cartController
                                                  .cartList[index]
                                                  .discount;
                                          this
                                              ._cartController
                                              .cartList[index]
                                              .quantity++;
                                        },
                                      ),
                                      Text(_cartController
                                          .cartList[index].quantity
                                          .toString()),
                                      IconButton(
                                        icon: Icon(Icons.keyboard_arrow_down),
                                        onPressed: () {
                                          if (_cartController
                                                  .cartList[index].quantity >
                                              1) {
                                            _cartController.total.value -= (this
                                                    ._cartController
                                                    .cartList[index]
                                                    .price -
                                                this
                                                    ._cartController
                                                    .cartList[index]
                                                    .discount);
                                            this
                                                ._cartController
                                                .cartList[index]
                                                .quantity--;
                                          }
                                        },
                                      ),
                                    ],
                                  ))
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                      itemCount: _cartController.cartList.length,
                    )
                  : Center(
                      child: Text('Your Shopping cart is empty'),
                    ));
    });

>Solution :

You need to add product in _cartController.cartList.

_addToCart(BuildContext context, ProductModel product) async {
  cartList.add(product);
  .... 
 }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading