How to toggle boolean in listview item independently? - flutter

Question

I am trying to change the color of a container with a button press. It looks at the boolean value and determines the color. How can I change the boolean for each individual listview item independently?
I am using provider for state management also. This is just an example of the type of thing I am trying to do.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
bool colorToggle = false;
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, i) {
return Container(
width: 100,
height: 100,
color: colorToggle ? Colors.blue : Colors.green,
child: GestureDetector(
onTap: () {
//how to change the colorToggle independendently with each listview item?
print('tapped');
},
child: Text('change color'),
),
);
},
),
),
);
}
}

Answer 1

You cannot achieve this with with a single boolean value.
You can use a List instead. Add the index of the item to the List once an item is tapped. Then check the List for the item's index to set color
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List toggled = List();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, i) {
return Container(
width: 100,
height: 100,
color: toggled.contains(i) ? Colors.blue : Colors.green,
child: GestureDetector(
onTap: () {
toggled.add(i);
setState(() {});
},
child: Text('change color'),
),
);
},
),
),
);
}
}