title: How do I add a counter that tells how many items of each are added in a cart in flutter
body: <p>The Main class</p>
  <p>I want to add a counter that counts how many items have been added to the cart for a single item. My current code takes the total number of items in the basket and outputs it on the list tile of every item in the cart, of which is not what I want.</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:fluttertoast/fluttertoast.dart';
  import 'cart.dart';
  import 'dish_object.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          backgroundColor: Colors.redAccent,
        ),
        home: MyHomePage(title: 'The Wing Republic'),
      );
    }
  }
  </code></pre>
  <p>The HomePage class</p>
  <pre><code>class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
  
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    List&lt;Dish&gt; _dishes = List&lt;Dish&gt;();
  
    List&lt;Dish&gt; _cartList = List&lt;Dish&gt;();
  
    @override
    void initState() {
      super.initState();
      _populateDishes();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: &lt;Widget&gt;[
            Padding(
              padding: const EdgeInsets.only(right: 16.0, top: 8.0),
              child: GestureDetector(
                child: Stack(
                  alignment: Alignment.topCenter,
                  children: &lt;Widget&gt;[
                    Icon(
                      Icons.shopping_basket,
                      size: 35.0,
                    ),
                    if (_cartList.length &gt; 0)
                      Padding(
                        padding: const EdgeInsets.only(left: 2.0),
                        child: CircleAvatar(
                          radius: 8.0,
                          backgroundColor: Colors.red,
                          foregroundColor: Colors.white,
                          child: Text(
                            _cartList.length.toString(),
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 12.0,
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
                onTap: () {
                  if (_cartList.isNotEmpty)
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) =&gt; Cart(_cartList),
                      ),
                    );
  
                  setState(() {
                    if (_cartList.isEmpty) {
                      Fluttertoast.showToast(
                          msg: &quot;Cart Empty, Add items to Cart&quot;,
                          toastLength: Toast.LENGTH_LONG,
                          gravity: ToastGravity.BOTTOM,
                          timeInSecForIosWeb: 1,
                          backgroundColor: Colors.red,
                          textColor: Colors.white,
                          fontSize: 16.0);
                    }
                  });
                },
              ),
            )
          ],
        ),
        body: _buildGridView(),
      );
    }
  </code></pre>
  <p>BuildListView Class</p>
  <pre><code>ListView _buildListView() {
      return ListView.builder(
        itemCount: _dishes.length,
        itemBuilder: (context, index) {
          var item = _dishes[index];
          return Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 8.0,
              vertical: 2.0,
            ),
            child: Card(
              elevation: 4.0,
              child: ListTile(
                leading: Text(item.category),
                /*Icon(
                  item.icon,
                  color: item.color,
                ),*/
                title: Text(item.brandName),
                subtitle: Text(item.price.toString()),
                trailing: GestureDetector(
                  child: (!_cartList.contains(item))
                      ? Icon(
                          Icons.add_circle,
                          color: Colors.green,
                        )
                      : Icon(
                          Icons.remove_circle,
                          color: Colors.red,
                        ),
                  onTap: () {
                    setState(() {
                      if (!_cartList.contains(item))
                        _cartList.add(item);
                      else
                        _cartList.remove(item);
                    });
                  },
                ),
              ),
            ),
          );
        },
      );
    }
  </code></pre>
  <p>GridView class</p>
  <pre><code>GridView _buildGridView() {
      return GridView.builder(
          padding: const EdgeInsets.all(4.0),
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: _dishes.length,
          itemBuilder: (context, index) {
            var item = _dishes[index];
            return Card(
                elevation: 4.0,
                child: Stack(
                  fit: StackFit.loose,
                  alignment: Alignment.center,
                  children: &lt;Widget&gt;[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: &lt;Widget&gt;[
                        /*Icon(
                          item.icon,
                          color: (_cartList.contains(item))
                              ? Colors.grey
                              : item.color,
                          size: 100.0,
                        ),*/
                        Text(item.category),
                        Text(
                          item.brandName,
                          textAlign: TextAlign.center,
                          style: Theme.of(context).textTheme.subhead,
                        ),
                        Text(
                          &quot;R&quot; + item.price.toString(),
                          textAlign: TextAlign.right,
                        )
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                        right: 8.0,
                        bottom: 8.0,
                      ),
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: GestureDetector(
                          child: (!_cartList.contains(item))
                              ? Icon(
                                  Icons.add_circle,
                                  color: Colors.green,
                                )
                              : Icon(
                                  Icons.remove_circle,
                                  color: Colors.red,
                                ),
                          onTap: () {
                            setState(() {
                              if (!_cartList.contains(item))
                                _cartList.add(item);
                              else
                                _cartList.remove(item);
                            });
                          },
                        ),
                      ),
                    ),
                  ],
                ));
          });
    }
  </code></pre>
  <p>PopulateDishes class for my list</p>
  <pre><code>void _populateDishes() {
      var list = &lt;Dish&gt;[
        Dish(
          category: 'Gin Cocktails',
          brandName: &quot;Clover Club&quot;,
          price: 65,
        ),
        Dish(
          category: 'WHISK(e)Y COCKTAILS',
          brandName: 'Select Reserve',
          price: 40,
        ),
        Dish(
          category: 'COGNAC/BRANDY COCKTAILS',
          brandName: 'Side Car',
          price: 110,
        ),
        Dish(
          category: 'RUM COCKTAILS',
          brandName: 'Mojito',
          price: 60,
        ),
        Dish(
          category: 'TEQUILLA COCKTAILS',
          brandName: &quot;Margarita&quot;,
          price: 65,
        ),
        Dish(
          category: 'VODKA COCKTAILS',
          brandName: 'Cosmopolitan',
          price: 80,
        ),
        Dish(
          category: 'MOCKTAILS',
          brandName: 'Pina Colada ',
          price: 45,
        )
      ];
  
      setState(() {
        _dishes = list;
      });
    }
  }
  </code></pre>
  <p>cart class</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:fluttertoast/fluttertoast.dart';
  import 'dish_object.dart';
  
  class Cart extends StatefulWidget {
    final List&lt;Dish&gt; _cart;
    Cart(this._cart);
  
    @override
    _CartState createState() =&gt; _CartState(this._cart);
  }
  
  class _CartState extends State&lt;Cart&gt; {
    _CartState(this._cart);
  
    List&lt;Dish&gt; _cart;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Cart'),
          actions: &lt;Widget&gt;[
            IconButton(
                icon: Icon(Icons.send_rounded),
                onPressed: () {
                  if (_cart.isNotEmpty) {
                    setState(() {
                      Fluttertoast.showToast(
                          msg: &quot;Order Confirmed&quot;,
                          toastLength: Toast.LENGTH_LONG,
                          gravity: ToastGravity.BOTTOM,
                          timeInSecForIosWeb: 1,
                          backgroundColor: Colors.grey,
                          textColor: Colors.white,
                          fontSize: 16.0);
                    });
                  }
                  if (_cart.isEmpty) {
                    setState(() {
                      Fluttertoast.showToast(
                          msg: &quot;Cart Empty&quot;,
                          toastLength: Toast.LENGTH_LONG,
                          gravity: ToastGravity.BOTTOM,
                          timeInSecForIosWeb: 1,
                          backgroundColor: Colors.red,
                          textColor: Colors.white,
                          fontSize: 16.0);
                    });
                  }
                }),
            if (_cart.length &gt; 0)
              Padding(
                padding: const EdgeInsets.only(left: 0.0),
                child: CircleAvatar(
                  radius: 8.0,
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                  child: Text(
                    _cart.length.toString(),
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 12.0,
                    ),
                  ),
                ),
              ),
          ],
        ),
        body: ListView.builder(
          itemCount: _cart.length,
          itemBuilder: (context, index) {
            var item = _cart[index];
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
              child: Card(
                elevation: 4.0,
                child: ListTile(
                  leading: Text(item.brandName +
                      &quot;\n&quot; +
                      item.category +
                      &quot;\n&quot; +
                      &quot;R&quot; +
                      item.price.toString()),
                  title: Text(_cart.length.toString()),
                  subtitle:GestureDetector(
                    child: Icon(
                      Icons.add,
                      color: Colors.green,
                    ),
                    onTap: () {
  
                      setState(() {
  
                        _cart.add(item);
                      });
                    },
                  )
                  ,
                  trailing: GestureDetector(
                      child: Icon(
                        Icons.remove_circle,
                        color: Colors.red,
                      ),
                      onTap: () {
                        setState(() {
                          _cart.remove(item);
                        });
                      }),
                  isThreeLine: true,
                ),
              ),
            );
          },
        ),
      );
    }
  }
  </code></pre>