flutter Update list, setstate does not work - flutter

Question

video:https://drive.google.com/file/d/1Nh49PxHeCak4YkaCHVec8hQCzgTN7Kr-/view?usp=sharing
The subcomponent clicks on the callback function, and the background color of the subcomponent cannot be changed by changing the value of list
I tried using deep copy and it still didn't work. How can I change the code to switch the background color?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<bool> tabsActive = [true,false,false,false,false];
void changeTabs(int view) {
print("view:$view");
for(int i = 0;i < tabsActive.length;i++) {
tabsActive[i] = false;
}
setState(() {
tabsActive[view-1] = true;
});
print(tabsActive);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body:Center(
child: Row(
children: <Widget>[
GameTabs("tab1",1,tabsActive[0],changeTabs),
GameTabs("tab2",2,tabsActive[1],changeTabs),
GameTabs("tab3",3,tabsActive[2],changeTabs),
GameTabs("tab4",4,tabsActive[3],changeTabs),
GameTabs("tab5",5,tabsActive[4],changeTabs),
],
),
)
);
}
}
typedef CallIntFun = void Function(int);
class GameTabs extends StatefulWidget {
final String title;
final int view;
final bool active;
CallIntFun changeTabs;
GameTabs(this.title,this.view,this.active,this.changeTabs);
#override
_GameTabsState createState() => _GameTabsState(title,view,active,changeTabs);
}
class _GameTabsState extends State<GameTabs> with SingleTickerProviderStateMixin {
AnimationController _controller;
final String title;
final int view;
final bool active;
Color bgColor;
CallIntFun changeTabs;
_GameTabsState(this.title,this.view,this.active,this.changeTabs);
#override
Widget build(BuildContext context) {
if (active) {
return ActiveGameTabs(title);
}
return Expanded(
child: GestureDetector(
onTap: (){
changeTabs(view);
},
child: Container(
height: 56,
padding: EdgeInsets.fromLTRB(0, 6, 0, 0),
decoration: BoxDecoration(
color: Color.fromRGBO(235, 235, 235, 1),
border: Border.all(
color: Colors.green,
width: 3.0,
style: BorderStyle.none
),
),
child: Text(
title,
textAlign: TextAlign.center,
),
),
)
);
}
}
class ActiveGameTabs extends StatelessWidget {
final String title;
ActiveGameTabs(this.title);
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
height: 56,
padding: EdgeInsets.fromLTRB(0, 6, 0, 0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.green,
width: 3.0,
style: BorderStyle.none
),
),
child: Text(
title,
textAlign: TextAlign.center,
),
)
);
}
}

Answer 1

You are passing the values from widget to state when the state is created for the first time. So it won't change when there is a change in any of those property (Because state won't gets created each time). You want to change your GameTab implementation like this:
class GameTabs extends StatefulWidget {
final String title;
final int view;
final bool active;
CallIntFun changeTabs;
GameTabs(this.title,this.view,this.active,this.changeTabs);
#override
_GameTabsState createState() => _GameTabsState();
}
class _GameTabsState extends State<GameTabs> with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
Widget build(BuildContext context) {
if (widget.active) {
return ActiveGameTabs(widget.title);
}
return Expanded(
child: GestureDetector(
onTap: (){
widget.changeTabs(widget.view);
},
child: Container(
height: 56,
padding: EdgeInsets.fromLTRB(0, 6, 0, 0),
decoration: BoxDecoration(
color: Color.fromRGBO(235, 235, 235, 1),
border: Border.all(
color: Colors.green,
width: 3.0,
style: BorderStyle.none
),
),
child: Text(
widget.title,
textAlign: TextAlign.center,
),
),
)
);
}
}