Switch is not updating properly

Question

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 ?

Solution

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
   }
 );
}