Question 212209 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – BottomNavigationBar set up But No Change of State

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.

Tags:

2

Answers


  1. 0

    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.
    ...
}
    Login or Signup to reply.
  2. 0

    Well, you have declared and defined your selected index variable to be 0 inside the build method. Your build method is called every time you rebuild the screen causing the selected index to stay at 0 instead of getting updated. To resolve this issue, you can simply move it outside your build method and preferably place it inside your _Thursday20State class. Here’s a modification of your code snippet.

    import 'package:flutter/material.dart';

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

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

class _Thursday20State extends State<Thursday20> {
int _selectedIndex = 0; // I have brought this line here and have also removed 
// the zzzxx method. 
  @override
  Widget build(BuildContext context) {
    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],
            ),
          ]),
    );
  }
}

    I hope that this helps you out, if it does please consider upvoting and accepting this as an answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search