How to update specific value on button click in card widget inside listview.builder Flutter

Question

I'm building a listview.builder inside it returns 5 (dynamically not static) card widget which contains two buttons and count number text widget. The problem is whenever i click on - or + button on first card widget it is updating on all cards. How to prevent this issue, that i want to update that count text only on first card widget. And i know it is inside the listview.builder but is there any solution to solve this issue.

class MenuCartWidget extends StatefulWidget {
  const MenuCartWidget({Key? key}) : super(key: key);

  @override
  _MenuCartWidgetState createState() => _MenuCartWidgetState();
}

class _MenuCartWidgetState extends State<MenuCartWidget> {
  int count = 1;
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
          child: ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemCount: 5, //dynamic eg: num.length;
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  child: Column(
                    children: [
                      Text('test'),
                      Row(
                        children: [
                          TextButton(
                              onPressed: () {
                                setState(() {
                                  count--;
                                });
                              },
                              child: Text('-')),
                          Text(count.toString()),
                          TextButton(
                              onPressed: () {
                                setState(() {
                                  count++;
                                });
                              },
                              child: Text('+')),
                        ],
                      )
                    ],
                  ),
                );
              }),
        ),
      ),
    );
  }
}

Solution

    class MenuCartWidget extends StatefulWidget {
      const MenuCartWidget({Key? key}) : super(key: key);
    
      @override
      _MenuCartWidgetState createState() => _MenuCartWidgetState();
    }
    
    class _MenuCartWidgetState extends State<MenuCartWidget> {
      //int count = 1;
      //List items = [1,1,1,1,1];
        List items = [];

      @override 
      void initState() { 
         super.initState(); 
         for(int i=0;i<itemCount.length;i++){ 
            items.add(1); 
         } 
      }
      @override
      Widget build(BuildContext context) {
        var height = MediaQuery.of(context).size.height;
        var width = MediaQuery.of(context).size.width;
        return Scaffold(
          body: Container(
            child: Padding(
              padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                      child: Column(
                        children: [
                          Text('test'),
                          Row(
                            children: [
                              TextButton(
                                  onPressed: () {
                                   items[index]--;
                                    setState(() {
                                      //count--;
                                       items;
                                    });
                                  },
                                  child: Text('-')),
                              Text(items[index].toString()),
                              TextButton(
                                  onPressed: () {
                                   items[index]++;
                                    setState(() {
                                      //count++;
                                       items;
                                    });
                                  },
                                  child: Text('+')),
                            ],
                          )
                        ],
                      ),
                    );
                  }),
            ),
          ),
        );
      }
    }

Comments

[Mohammed Nabil]

What if the item count is dynamic then how to solve this ?

[Jignesh Patel]

You can add with for loop to add items array. List items = []; for(int i=0; i<itemCount;i++ ){ items.add(1) }

[Mohammed Nabil]

Where i have to forloop?

[Jignesh Patel]

@override void initState() { super.initState(); List items = []; for(int i=0; i<itemCount;i++ ){ items.add(1) } }

[Mohammed Nabil]

What about itemCount = 5 inside listview.builder? Could you please edit your code because it is showing errors

[Jignesh Patel]

Please check it. i edited my code

[Mohammed Nabil]

You are not using forloop?

[Jignesh Patel]

I added for loop. please check it.