How to Increment Counter For a Specific List Item In Flutter ?

4 min read
How to Increament Counter For a Specific List Item In Flutter
How to Increament Counter For a Specific List Item In Flutter

Nowadays almost every eCommerce Application requires a cart functionality from where users can add and remove items in it. So in this article, we will learn about How to increment the counter for a specific list item in Flutter.

How to Increment Counter For a Specific List Item In Flutter?

class FlutterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView(
        children: new List.generate(5, (i)=>new ListTileItem(
          title: "Item#$i",
        )),
      ),
    );
  }
}
class ListTileItem extends StatefulWidget {
  String title;
  ListTileItem({this.title});
  @override
  _ListTileItemState createState() => new _ListTileItemState();
}

class _ListTileItemState extends State<ListTileItem> {
  int _itemCount = 0;
  @override
  Widget build(BuildContext context) {
    return new ListTile(
      title: new Text(widget.title),
      trailing: new Row(
        children: <Widget>[
           _itemCount!=0? new  IconButton(icon: new Icon(Icons.remove),onPressed: ()=>setState(()=>_itemCount--),):new Container(),
            new Text(_itemCount.toString()),
            new IconButton(icon: new Icon(Icons.add),onPressed: ()=>setState(()=>_itemCount++))
        ],
      ),
    );
  }
}

All you need to do is to refactor your widgets the proper way. You can refactor your Cards/items into their separate Stateful Widget such that each increment/decrement affects only a specific item and not the whole list.

So we will get output like the below:

Item List Flutter
Item List Flutter

Add below code as children of a Column Widget or Row Widget. The code snippet will look like the below:

itemData[index].ShouldVisible?
                             Center(
                                 child: Container(
                                   height: 30,
                                   width: 70,
                                   decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(4),
                                       border: Border.all(color: Colors.white70)
                                   ),
                                   child: Row(
                                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                     children: <Widget>[
                                       InkWell(
                                       onTap: (){
                                        setState(() {
                                          if(itemData[index].Counter <2)
                                            {
                                              itemData[index].ShouldVisible = !itemData[index].ShouldVisible;
                                            }else{
                                           itemData[index].Counter--;
                                          }

                                        });
                                       }
                                       ,child: Icon(Icons.remove,color: Colors.green,size: 18,)),
                                       Text('${itemData[index].Counter}',style: TextStyle(
                                         color: Colors.white70
                                       ),
                                       ),
                                       InkWell(
                                       onTap: (){
                                         setState(() {
                                           itemData[index].Counter++;
                                         });
                                       }
                                       ,child: Icon(Icons.add,color: Colors.green,size: 18,)),

                                     ],
                                   ),

                                 )
                             ) : Center(
                                child: Container(
                                  padding: EdgeInsets.all(5),
                                  height: 30,
                                  width: 70,
                                  decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(4),
                                    border: Border.all(color: Colors.white70)
                                  ),
                                  child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                      Text('ADD',style: TextStyle(color: Colors.white70),
                                      ),
                                      InkWell(
                                        onTap: (){

                                          setState(() {
                                            itemData[index].ShouldVisible = ! itemData[index].ShouldVisible;
//                                          

                                          });
                                        }
                                          ,child: Center(child: Icon(Icons.add,color: Colors.green,size: 18,)))

                                    ],
                                  ),

                                ),
                              )

Add Counter and ShouldVisible to your DataStructure as shown below.

class ItemData{
  String Name;
  int Counter;
  bool ShouldVisible;

  ItemData({
   this.Name,
    this.Counter,
    this.ShouldVisible
});
}

List<ItemData> itemData = [
ItemData(
  Name: 'Shoes 1',
  Counter: 1,
  ShouldVisible: false
),
  ItemData(
      Name: 'Shoes 2',
      Counter: 1,
      ShouldVisible: false
  ),];

Conclusion:

So in this article, we have been through How to Increment Counter For a Specific List Item In Flutter.

Hope you are enjoying our articles.

Keep learning!!! Keep Fluttering!!!

Do share your valuable suggestions/feedback for the same!! We would love to assist you 馃檪

Flutter Agency聽is our portal Platform dedicated to Flutter Technology and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

Flutter Agency is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.

Leave a Reply