coloring containers by tabbing with flutter - flutter

Question

I have column with many ((Tabbed)) items, when I tab on one of them it should be colored and the others transparent, and here is my Tabbed classthis image for what I have now with my code
class Tabbed extends StatefulWidget {
#override
_TabbedState createState() => _TabbedState();
}
class _TabbedState extends State<Tabbed> {
Color color = Colors.transparent;
#override
void initState() {
color = Colors.transparent;
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
print("tab");
if (color == Colors.transparent){
setState(() {
color = Colors.purple;
});
}
else{
setState(() {
color = Colors.transparent;
});
}
},
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: color,
border: Border.all(color: Colors.red,width: 1),
),
),
);
}
}

Answer 1

you can simply try creating a model for your boxes and have a boolean property and store the status of each box in a list to know whether the box is tapped or not ,you can also pefer a list of boolean but I prefer creating a list of model as it will allow you to add more properties, I have modified your code a little bit you can see it working here on dartpad as well
class Tabbed extends StatefulWidget {
#override
_TabbedState createState() => _TabbedState();
}
class _TabbedState extends State<Tabbed> {
Color color = Colors.green;
#override
void initState() {
for(int i=0;i<listLength;i++){
list1.add(
TabModel(isTapped: false)); // assigns initial value to false
}
for(int i=0;i<listLength;i++){
list2.add(
TabModel(isTapped: false)); // assigns initial value to false
}
}
Widget column1(){
return Column(
children: List.generate(
listLength,
(index) =>GestureDetector(
onTap: (){
// this selects only one out of many and disables rest
for(int i=0;i<list1.length;i++){
if(i!=index){
list1[i].isTapped=false;
}
};
setState((){
list1[index].isTapped = true;
});
},
child:Container(
margin:EdgeInsets.all(5),
color: list1[index].isTapped? Colors.red:color,
height:100,
width:100
))
));
}
Widget column2(){
return Column(
children: List.generate(
listLength,
(index) =>GestureDetector(
onTap: (){
setState((){
list2[index].isTapped = !list2[index].isTapped;
});
},
child:Container(
margin:EdgeInsets.all(5),
color: list2[index].isTapped? Colors.red:color,
height:100,
width:100
))
));
}
List<TabModel> list1 =[];
List<TabModel> list2 =[];
int listLength=5;
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
column1(),
column2()
],);
}
}
class TabModel{
bool isTapped = false;
TabModel({this.isTapped});
}
if this is not what you want or if you face any issue understanding any part of the code feel free to drop a comment I would love to help out
the bwlow output shows two independent columns in coumn1 you can select one out of many boxes and in other you can select multiple boxes