In my flutter app I have this widget :
class MenuPage extends StatefulWidget {
final List<Team> teams;
final List<Game> games;
const MenuPage({Key? key, required this.teams, required this.games})
: super(key: key);
@override
_MenuState createState() => _MenuState();
}
class _MenuState extends State<MenuPage> {
int _currentIndex = 0;
late TeamDataSource teamDataSource;
List<Team> teams = [];
List<Game> games = [];
List<Widget> body = [];
bool isSwitched = true;
@override
void initState() {
teams = widget.teams;
games = widget.games;
teamDataSource = TeamDataSource(teamData: teams);
body = [
RankingTable(teams: teamDataSource),
getMatches(),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: body[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (int newIndex) {
setState(() {
_currentIndex = newIndex;
});
},
items: const [
BottomNavigationBarItem(
label: "Ranking", icon: Icon(Icons.format_list_numbered)),
BottomNavigationBarItem(
label: "Matchs", icon: Icon(Icons.sports_soccer)),
],
),
);
}
Widget getMatches() {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return ListView(
children: [
Switch(
value: isSwitched,
onChanged: (newValue) {
setState(() {
isSwitched = newValue;
//print(isSwitched);
});
},
),
for (var game in games)
SizedBox(
height: constraints.maxHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: CachedNetworkImage(
imageUrl: game.homeTeamImage,
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) =>
new Icon(Icons.error),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
parseDate(game.date),
style: const TextStyle(
fontFamily:
"Work Sans, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
fontSize: 16),
),
Text(
game.time.substring(0, 5),
style: const TextStyle(
fontFamily: "Changa", fontSize: 30),
)
],
),
),
Expanded(
child: CachedNetworkImage(
imageUrl: game.awayTeamImage,
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) =>
new Icon(Icons.error),
),
)
],
),
)
],
);
});
}
}
Inside the getMatches function the switch widget not update properly. When I try to switch the button it always goes back to the true value. I think that's because I'm using a function that returns a widget and if I put the switch Widget inside the build method it should work. Can someone tell me what is wrong I my code ?
CodePudding user response:
That is the problem; either extract the widget you're returning inside the getMatches as a separate widget (with its own build method - the preferred approach) or just wrap the LayoutBuilder widget inside a StatefulBuilder widget, which provides a closure for encapsulating changes triggered by the setState to only this widget, as in:
Widget getMatches() {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return LayoutBuilder() // rest of the code
}
);
}