How to Increment and Decrements single item in a List View in Flutter? - flutter

Question

In my products Screen I have two buttons + and - for quantity,
these two buttons in my ListView it Increment/Decrement the whole list , I want to increment or decrement quantity upon button click for single list item. If I increase or decrease the counter it increment in every list item.
StreamController _event =StreamController<int>.broadcast();
int _counter = 0;
void initState() {
super.initState();
_event.add(0);
}
#override
Widget build(BuildContext context) {
.
.
return Scaffold(
body: allItemsFlowlist(),
);
}
Widget allItemsFlowlist(){
return Container(
child: ListView.builder(
itemCount: items.documents.length,
physics: AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
itemBuilder: (context, i) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 3,
child: Row(
children: <Widget>[
Flexible(
flex: 4,
child: Container(
child: Row(
children: <Widget>[
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
color: colorPallet('vprice_sectionIncrementerBackground'),
borderRadius: BorderRadius.circular(5),
),
child: IconButton(
icon: Icon(Icons.remove),
onPressed: _decrementCounter,
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground')
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
width: 35,
height: 35,
decoration: BoxDecoration(
border: Border.all(
color: colorPallet('vprice_sectionIncrementerBackground'), //Color(0xFFFFD500),
width: 2,
),
borderRadius: BorderRadius.circular(5),
),
child: Center(
child: StreamBuilder<int>(
stream: _event.stream,
builder: (context, snapshot) {
return Text(
_counter.toString(),
style: TextStyle(
color: colorPallet('vprice_sectionTextTextStyle4'),
fontSize: 16,
fontWeight: FontWeight.w500,
),
);
}),
),
),
),
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
color: colorPallet('vprice_sectionIncrementerBackground'),
borderRadius: BorderRadius.circular(5),
),
child: IconButton(
icon: Icon(Icons.add),
onPressed: _incrementCounter,
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground'),
),
),
],
)),
),
Incrementer:
_incrementCounter() {
_counter++;
_event.add(_counter);
}
Decrementer:
_decrementCounter() {
if (_counter <= 0) {
_counter = 0;
} else {
_counter--;
}
_event.add(_counter);
}

Answer 1

Turn _counter into a list and add an item for each item in your listView.builder to it.
And when changing, change _counter [i];
And so will change that specific item!
List<int> _counter = List();
ListView.builder(
itemCount: items.documents.length,
physics: AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
itemBuilder: (context, i) {
if(_counter.length < items.documents.length){
_counter.add(0);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
[...]
child: IconButton(
icon: Icon(Icons.remove),
onPressed: (){_decrementCounter(i);},
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground')
),
),
[...]
child: IconButton(
icon: Icon(Icons.add),
onPressed: (){_incrementCounter(i);},
iconSize: 18,
color: colorPallet('vprice_sectionDecrementerBackground'),
),
),
],
)),
),
[...]
_incrementCounter(int i) {
_counter[i]++;
_event.add(_counter[i]);
}
_decrementCounter(int i) {
if (_counter[i] <= 0) {
_counter[i] = 0;
} else {
_counter[i]--;
}
_event.add(_counter[i]);
}
Hope this helps!