How to increment for a specific in Flutter? - flutter

Question

enter image description here Like in my sample image, below, I want to increase or decrease the quantity by clicking the button for a single list item. If I increase the counter in setState (), its increment in each item in the list. I need help with this, especially managing a specific list item in Flutter Flutter.
Container(
height: 500.0,
width: double.infinity,
child: GridView.count(
crossAxisCount: 2,
children:
List.generate(userData == null ? 0 : userData.length, (index) {
return Container(
child: SizedBox(
width: 700,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.network(
"${userData[index]["image"]}",
width: 300,
height: 100,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: IconButton(
color: Colors.blue,
icon: const Icon(Icons.remove_circle,
size: 35.0),
onPressed: _decrementCount),
),
Container(
child: CircleAvatar(
radius: 20.0,
backgroundColor: Colors.white,
child: Text(
_counter.toString(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
child: IconButton(
color: Colors.orange,
icon: const Icon(Icons.add_circle,
size: 35.0),
onPressed: () {
_incrementCount(userData[index]);
},
),
),
],
),
Container(
height: 20.0,
child: Text(
"${userData[index]["libelle"]}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.orange,
),
),
),
],
))),
);
})),
)

Answer 1

Make a separate Stateful class for your List item.
Like this
List.generate(2, (index) => MyCustomWidget(
user[index]
))
class MyCustomWidget extends StatefulWidget {
final user;
const MyCustomWidget({Key? key,required this.user}) : super(key:key);
#override
_MyCustomWidgetState createState() => _MyCustomWidgetState();
}
class _MyCustomWidgetState extends State<MyCustomWidget> {
#override
Widget build(BuildContext context) {
return Container(
child: SizedBox(
width: 700,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.network(
"${widget.user["image"]}",
width: 300,
height: 100,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: IconButton(
color: Colors.blue,
icon: const Icon(Icons.remove_circle,
size: 35.0),
onPressed: _decrementCount),
),
Container(
child: CircleAvatar(
radius: 20.0,
backgroundColor: Colors.white,
child: Text(
_counter.toString(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
child: IconButton(
color: Colors.orange,
icon: const Icon(Icons.add_circle,
size: 35.0),
onPressed: () {
_incrementCount(userData[index]);
},
),
),
],
),
Container(
height: 20.0,
child: Text(
"${widget.user["libelle"]}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.orange,
),
),
),
],
))),
);
}
}

Answer 2

set some
conditions ? Image.network(
"${userData[index]["image"]}",
width: 300,
height: 100,
), : Image.network(
"${userData[index]["image"]}",
width: 400,
height: 250,
),
So if condition true then it's display like first one other wise take second one