flutter: How to modify the color of a Container in a large number of Containers - flutter

Question

sorry for not being able to explain what I really want to mean in the title, but you will understand in the picture below and the code is what I have done.
import 'package:flutter/material.dart';
class ChangeColor extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ChangeColorState();
}
}
class _ChangeColorState extends State<ChangeColor> {
List<Color> colorList = List(3);
int selectedId = 0;
void selectById(int id) {
setState(() {
selectedId = id;
});
}
void renderColor(int selectedId) {
for (int i = 0; i < 3; ++i) {
if (i == selectedId) {
colorList[i] = Colors.teal;
} else {
colorList[i] = Colors.red;
}
}
}
#override
Widget build(BuildContext context) {
Widget myContainer(int id, Color color) {
return InkWell(
child: Container(
width: 100, height: 100,
color: color,
),
onTap: () {
selectById(id);
},
);
}
renderColor(selectedId);
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
children: <Widget>[
myContainer(0, colorList[0]),
myContainer(1, colorList[1]),
myContainer(2, colorList[2]),
],
)
),
),
);
}
}
So my question is if I have a large number of Containers and even don't know the exact number, I can't give every Container an id and maybe can't use List, so how to solve the problem.
Actually this happens sometimes, for example in Calendar app. Thanks for any suggestion or criticism.

Answer 1

How about this way?
Widget myContainer(int id) {
return InkWell(
child: Container(
width: 100, height: 100,
color: selectedId == id ? Colors.teal : Colors.red,
),
onTap: () {
selectById(id);
},
);
}
It is a full code I fixed from your code.
And I recommend to move a 'myContainer' to outside of build().
class _ChangeColorState extends State<ChangeColor> {
List<Color> colorList = List(3);
int selectedId = 0;
void selectById(int id) {
setState(() {
selectedId = id;
});
}
Widget myContainer(int id) {
return InkWell(
child: Container(
width: 100,
color: selectedId == id ? Colors.teal : Colors.red,
),
onTap: () {
selectById(id);
},
);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
height: 100,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return myContainer(index);
},
),
),
),
),
);
}
}