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(' ')),
                        ],
                      )
                    ],
                  ),
                );
              }),
        ),
      ),
    );
  }
}

CodePudding user response：

    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(' ')),
                            ],
                          )
                        ],
                      ),
                    );
                  }),
            ),
          ),
        );
      }
    }

CodePudding user response：

Maybe I think we can do this.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const MenuCartWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headline4,
    );
  }
}

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

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

class _MenuCartWidgetState extends State<MenuCartWidget> {
  int count = 1;
  int selectedIndex = -1;
  var listValues = [
    ["test1", 0],
    ["test2", 0],
    ["test3", 0],
    ["test4", 0],
    ["test5", 0]
  ];

  List<int> counterList = [];

  @override
  void initState() {
    for (int i = 0; i < listValues.length; i  ) {
      counterList.add(listValues[i][1] as int);
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Padding(
        padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
        child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: listValues.length,
            itemBuilder: (BuildContext context, int index) {
              return SingleChildScrollView(
                child: Card(
                  child: Column(
                    children: [
                      Text(listValues[index][0].toString()),
                      Row(
                        children: [
                          TextButton(
                              onPressed: () {
                                setState(() {
                                  counterList[index]--;
                                  listValues[index][1] = counterList[index];
                                });
                              },
                              child: const Text('-')),
                          Text(listValues[index][1].toString()),
                          TextButton(
                              onPressed: () {
                                setState(() {
                                  counterList[index]  ;
                                  listValues[index][1] = counterList[index];
                                });
                              },
                              child: const Text(' ')),
                        ],
                      )
                    ],
                  ),
                ),
              );
            }),
      )),
    );
  }
}