title: Flutter ListView.builder() item click change UI data?
body: <p>I want to increase the quantity when '+' icon se clicked and decrease the quantity when '-' icon is clicked in the ListView.builder(). But my code changes quantity of all listview items whichever icon I clicked. I'm new to Flutter and Dart. I want to change the data of particular row when user taps either '+' or '-' icon of that particular row.</p>
  <p>Please help me to resolve my issue.</p>
  <p>Here is my code -:</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter_testing/InkWellGesture.dart';
  
  class Cart extends StatefulWidget {
    Cart({Key key}) : super(key: key);
  
    @override
    _CartState createState() =&gt; _CartState();
  }
  
  class _CartState extends State&lt;Cart&gt; {
    int qty = 1;
    int items = 2;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Cart'),
        ),
        body: Column(
          children: &lt;Widget&gt;[
            Container(
              padding: EdgeInsets.only(
                left: 3,
              ),
              height: 60,
              child: Card(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8)),
                elevation: 3,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: &lt;Widget&gt;[
                    Expanded(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: &lt;Widget&gt;[
                          Container(
                            margin: EdgeInsets.only(left: 3, top: 7, right: 6),
                            width: 13,
                            height: 15,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle, color: Colors.green),
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: &lt;Widget&gt;[
                              Text('Deliver to NAME address line 1...',
                                  style: TextStyle(fontSize: 15)),
                              Text('click here to change address',
                                  style: TextStyle(
                                      fontSize: 12, color: Colors.grey)),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Icon(Icons.keyboard_arrow_right),
                  ],
                ),
              ),
            ),
            Expanded(
              child: ListView.builder(
                  itemCount: items,
                  itemBuilder: (ctx, itemIndex) {
                    return Card(
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15)),
                      child: Container(
                        height: 65,
                        margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                        child: Row(
                          children: &lt;Widget&gt;[
                            Container(
                              width: 65,
                              height: 65,
                              decoration: BoxDecoration(
                                  border:
                                      Border.all(color: Colors.grey, width: 1),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(10))),
                            ),
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: &lt;Widget&gt;[
                                  Padding(
                                    padding:
                                        const EdgeInsets.only(left: 10, right: 7),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: &lt;Widget&gt;[
                                        Text('Item Name',
                                            style: TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold)),
                                        Text(
                                          '\u{20B9} 9,999',
                                          style: TextStyle(fontSize: 18),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(right: 4),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: &lt;Widget&gt;[
                                        Expanded(
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceEvenly,
                                            children: &lt;Widget&gt;[
                                              inkWellGesture(
                                                () {
                                                  setState(() {
                                                    qty += 1;
                                                  });
                                                },
                                                child: Icon(
                                                  Icons.add_circle,
                                                  color: Colors.green,
                                                  size: 25,
                                                ),
                                              ),
                                              Text(
                                                qty &gt; 0 ? qty.toString() : '1',
                                                style: TextStyle(fontSize: 16),
                                              ),
                                              inkWellGesture(
                                                () {
                                                  setState(() {
                                                    qty -= 1;
                                                  });
                                                },
                                                child: Icon(
                                                  Icons.remove_circle,
                                                  color: Colors.red,
                                                  size: 25,
                                                ),
                                              )
                                            ],
                                          ),
                                        ),
                                        Expanded(
                                          flex: 2,
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.end,
                                            children: [
                                              Icon(
                                                Icons.delete_forever,
                                                color: Colors.red,
                                                size: 25,
                                              ),
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  }),
            ),
            Container(
              height: 200,
              padding: const EdgeInsets.only(top: 15, left: 15, right: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
                  TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Promo Code',
                      )),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: &lt;Widget&gt;[
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: &lt;Widget&gt;[
                            Text('Shipping'),
                            Text('Offer'),
                            Text('Tax'),
                            Text('Sub Total'),
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: &lt;Widget&gt;[
                            Text('  \u{20B9} 80'),
                            Text('- \u{20B9} 100'),
                            Text('  \u{20B9} 1,799'),
                            Text('  \u{20B9} 8,200')
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                    width: double.infinity,
                    child: FlatButton(
                      child: Text('PROCEED TO \u{20B9} 10,019',
                          style: TextStyle(fontSize: 20)),
                      onPressed: () {},
                      color: Colors.green,
                      textColor: Colors.white,
                    ))),
          ],
        ),
      );
    }
  </code></pre>
  <p>Here is the screenshot -:</p>
  <p><a href="https://i.stack.imgur.com/npbsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/npbsF.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/cGzGq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cGzGq.png" alt="enter image description here" /></a></p>