How to re render List<Widget> when delete button pressed in flutter using Redux store?

1

I am trying to delete items from my cart when the delete button is pressed. I am using rest API where I can update the cart items when deleted. But I couldn't able to update it on UI immediately. And I am using redux for state management. I am trying to delete the card immediately from both UI and API when the cross button is pressed

enter image description here

This is everything I have tried

                       child: Container(
                        padding: EdgeInsets.only(left: 5,bottom: 5, top: 5, right: 5),
                        height: 320,
                        width: MediaQuery.of(context).size.width,
                        child: GridView.count(
                        crossAxisCount: 3,
                        childAspectRatio: (itemWidth / itemHeight),
                        //controller: new ScrollController(keepScrollOffset: false),
                        shrinkWrap: true,
                        children: _showAddedCart()
                        // List.generate(addedItem.length, (index) {
                        //   return _showAddedCart;
                        // }),
                      ),
                      ),
   ),
    print('this is running');
    List<Widget> list = [];
    // var index = 0;
    for (var d in store.state.itemCart) {
      list.add(
        SelectedCard(d)
      );
    }
    return list;`
  }

import 'dart:convert';
import 'package:canna_go_dev/api/api.dart';
import 'package:canna_go_dev/main.dart';
import 'package:canna_go_dev/redux/action.dart';
import 'package:canna_go_dev/redux/thunk.dart';
import 'package:flutter/material.dart';


class SelectedCard extends StatefulWidget {
  final data;
  SelectedCard(this.data); 
  @override
  _SelectedCardState createState() => _SelectedCardState();
}

class _SelectedCardState extends State<SelectedCard> {

  bool _isLoading = false;
  bool _isDeleted = false;

 @override
  void initState() {
    _showCartItems();
    super.initState();
  }

  void _showCartItems(){

    setState(() {
      _isLoading = true;
    });

    store.dispatch(cartData(widget.data));



    setState(() {
      _isLoading = false;
    });

    //print(store.state.cart.item.name);
  }
  @override
  Widget build(BuildContext context) {
    return //_isDeleted ? Container() : 
    Container(

         //color: Colors.blue,
       child: Card(
         elevation: 4,
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(15)
         ),
              child: Container(
                //color: Colors.red,
                          child: Stack(
                            children: <Widget>[
                                   Container(
                                padding: EdgeInsets.only(bottom: 15, top: 15),

                                      decoration: BoxDecoration(
                                         color: Color(0xFFFFFFFF),
                                        borderRadius: BorderRadius.circular(15)

                                      ),


                                        child: Column(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                              children: <Widget>[

                                            Container(
                                             // color: Colors.red,
                                              width: 100,
                                              margin: EdgeInsets.only(top: 2, bottom: 3),
                                              padding: EdgeInsets.only(left: 8),
                                              child: Text.rich(
                                TextSpan(children: <TextSpan>[
                                  TextSpan(
                                    text: "\$${store.state.cart.item.price}",
                                    style: TextStyle(
                                  color: Color(0xFF01D56A),
                                  fontFamily: "sourcesanspro",
                                  fontSize: 15,
                                  fontWeight: FontWeight.w400       
                                        ),
                                  ),
                                  // TextSpan(
                                  //   text: ".55",
                                  //   style: TextStyle(
                                  // color: Color(0xFF01D56A),
                                  // fontFamily: "sourcesanspro",
                                  // fontSize: 12,
                                  // fontWeight: FontWeight.w400       
                                  //       ),
                                  // ),
                                ] ),
                              ),
                                            ),
                                            Container(
                                              width: 65,
                                              height: 65,
                                              //margin: EdgeInsets.only(left: 15),
                                              decoration: new BoxDecoration(
                                              //shape: BoxShape.circle,

                                           image: new DecorationImage(
                                            fit: BoxFit.fill,

                                            image: new AssetImage("assets/img/med.jpg"),

                                        )
                                  )
                               ),

                                          Container(   
                                           // color: Colors.blue, 
                      width: 100,
                    //  height: 15,
                      margin: EdgeInsets.only(top: 5),
                      child: Text(
                        store.state.cart.item.name,
                        // "${widget.data.item.name}",
                              overflow: TextOverflow.ellipsis,
                               textAlign: TextAlign.center,
                               style: TextStyle(
                                  color: Color(0xFF000000),
                                  fontFamily:"sourcesanspro",
                                  fontSize: 13,
                                  fontWeight: FontWeight.w400       
                                        ),
                                   ),
                                ),

                          Container(    
                      width: 100,
                    //  height: 10,
                      margin: EdgeInsets.only(top: 3),
                      child: Text(
                              "900v",
                              overflow: TextOverflow.ellipsis,
                               textAlign: TextAlign.center,
                               style: TextStyle(
                                  color: Color(0xFF000000),
                                  fontFamily:"sourcesanspro",
                                  fontSize: 13,
                                  fontWeight: FontWeight.w400       
                                        ),
                                   ),
                                ),


                                Container(
                                 // color: Colors.red,
                                 margin: EdgeInsets.only(top: 5),
                                 padding: EdgeInsets.only(left: 5, right: 5),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: <Widget>[

                                      ///////////// Dicrement Button////////
                                      GestureDetector(
                                        onTap: (){

                                          decrement();
                                        },
                                       child: Container(
                                    decoration: BoxDecoration(
                                        border: Border(
                                            top: BorderSide(width: 1,  color: Color(0xFF9b9b9b)),
                                            left: BorderSide(width: 1, color: Color(0xFF9b9b9b),),
                                            right: BorderSide(width: 1, color: Color(0xFF9b9b9b),),
                                            bottom: BorderSide(width: 1, color: Color(0xFF9b9b9b),),
                                        ),
                                            shape: BoxShape.circle,
                                    ),      
                                    child: Icon(
                                        Icons.remove
                                     // size: 20,
                                    ),
                                  ),
                                      ),

                                      //////////// Dicrement Button end////////

                                  ///////////Quantity start /////////
                                  Container(    
                                    //width: 100,
                                  //  height: 10,
                                margin: EdgeInsets.only(top: 3),
                                child: Text(
                                  "${store.state.cart.quantity}",
                                        overflow: TextOverflow.ellipsis,
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            color: Color(0xFF000000),
                                            fontFamily:"sourcesanspro",
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold       
                                                  ),
                                            ),
                                          ),
                                  ///////////Quantity end /////////


                                  //////////// Increment Button////////
                                  GestureDetector(
                                    onTap: (){

                                      increment();

                                    },
                                    child: Container(
                                      decoration: BoxDecoration(
                                        border: Border(
                                             top: BorderSide(width: 1,  color: Color(0xFF9b9b9b)),
                                            left: BorderSide(width: 1, color: Color(0xFF9b9b9b),),
                                            right: BorderSide(width: 1, color: Color(0xFF9b9b9b),),
                                            bottom: BorderSide(width: 1, color: Color(0xFF9b9b9b),),
                                        ),
                                            shape: BoxShape.circle,
                                      ),


                                      child: Icon(
                                        Icons.add,
                                       // size: 20,
                                      ),
                                    ),
                                  )

                                  //////////// Increment Button end////////


                                    ],
                                  ),
                                )


                                          ],
                                        ),
                                          ),




                     //////////////////Positioned //////////////////
                                           Positioned(
                                             right: 1,
                                  child: GestureDetector(
                                    onTap: (){
                                      _deleteCart();
                                    },
                                     child: Container(
                                     // margin: EdgeInsets.only(left: 85),
                                            child: Icon(
                                              Icons.cancel
                                            ),
                                          ),
                                  ),
                                )
                               ],
                            ),
                        ),
       ),
     );
  }


  decrement(){

        if(store.state.cart.quantity == 1){

        }
        else{
      setState(() {
            store.state.cart.quantity--;
        });

    }

    //print('-- oise');
  }

  increment(){

        setState(() {

          store.state.cart.quantity++;
        });

       // print('Plus oise');
  }


  void _deleteCart() async{

    // setState(() {
    //  _isDeleted = true; 
    // });

    // var data = {
    //   'id': '${widget.data.id}'//'${store.state.cart.id}',
    //   };      
    //   var res = await CallApi().postData(data, '/app/curtsdelete');     
    //   var body = json.decode(res.body);      
    //   print(body);    

       store.dispatch(deleteItem(store.state.cart.id)); 


      // if (body['success'] == true) {       

      //   } 
      //   else {  //_showMsg(body['message']);     
      //   }
  }
}

thunk.dart

ThunkAction <AppState> deleteItem(d) => (Store<AppState> store) async{



    // for(var data in store.state.itemCart){

    //   if(data.id == d.id ){        
    //     store.state.itemCart.remove(data);

    //      }
    // }
   print(store.state.itemCart.length);
   store.state.itemCart.removeAt(0);
   store.dispatch(CartListItem(store.state.itemCart));

};
android
gridview
redux
flutter
render
asked on Stack Overflow Jul 10, 2019 by Rahi • edited Jul 11, 2019 by Rahi

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0