BottomNavigationBar set up But No Change of State

Question

Using the code below I set up a BottomNavigationBar widget for testing in Flutter.

import 'package:flutter/material.dart';

class Thursday20 extends StatefulWidget {
  const Thursday20({super.key});

  @override
  State<Thursday20> createState() => _Thursday20State();
}

class _Thursday20State extends State<Thursday20> {
  @override
  Widget build(BuildContext context) {

    int _selectedIndex = 0;

    void _zzzxx(int index) {
      setState(() {
        _selectedIndex = index;
      });
    }

    final screens = [
      Center(child: Text('HHHHH', style: TextStyle(fontSize: 60),),),
      Center(child: Text('SSSSS', style: TextStyle(fontSize: 60),),),
      Center(child: Text('EEEEE', style: TextStyle(fontSize: 60),),),
      Center(child: Text('PPPPP', style: TextStyle(fontSize: 60),),),
    ];

    return Scaffold(
      body: screens[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.blueGrey[700],
          selectedItemColor: Colors.blueGrey[100],
          unselectedItemColor: Colors.blueGrey,
          currentIndex: _selectedIndex,
          onTap: (index) => setState(() => _selectedIndex = index),
          iconSize: 37.0,
          selectedFontSize: 16.0,
          unselectedFontSize: 11.0,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.label_important),
              label: 'Forwards',
              backgroundColor: Colors.blueGrey[700],
            ),
            BottomNavigationBarItem(icon: Icon(Icons.wallet),
              label: 'Wallet',
              backgroundColor: Colors.blueGrey[700],
            ),
            BottomNavigationBarItem(icon: Icon(Icons.backspace_outlined),
              label: 'Delete',
              backgroundColor: Colors.blueGrey[700],
            ),
            BottomNavigationBarItem(icon: Icon(Icons.zoom_out_map_outlined),
              label: 'Zoom Out',
              backgroundColor: Colors.blueGrey[700],
            ),
          ]),
    );
  }
}

Following the examples from a video tutorial, I expected the text on the screen to change with each selection of the navigation-bar-options, but instead the screen remains still as a constant in the way it loaded, despite selections.

Is there something that I have done wrong and could you direct me in the direction of my expected outcome please?

With thanks.

Answer 1

The selectedIndex is part of your build method. It should instead be part of your state.

Your build method is executed every time you call setState, and since selectedIndex is declared inside, it is always initialized with a value of 0.

Solution: Make selectedIndex part of your state class.

class _Thursday20State extends State<Thursday20> {
  /// [selectedIndex] is now part of your state.
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    /// remove [selectedIndex] from here.
    ...
}