Bottom Navigation Bar is not chaning screens in Flutter

Question

I am very new to Flutter and Dart but quite good at native android dev(Java), and I am trying to build a bottom navigation bar which switches between three stateful widgets. I successfully implemented the design of the bottom navigation bar but couldn't execute the operation for it. I followed the official documentation and this youtube video:

• https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
• https://www.youtube.com/watch?v=18PVdmBOEQM&t=942s (15th minute)

File Structure:

main
  - screens
    - home
    - (other screens' folders)
    - first.dart

first.dart

class First extends StatefulWidget {
  @override
  _FirstState createState() => _FirstState();
}

class _FirstState extends State<First> {
  int _currentIndex = 0;
  List<Widget> listItems = [
    Home(),
    Dashboard(),
    Therapy(),
    Profile()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Color(0xFF856C8B),
        selectedItemColor: Color(0xFFFFFFFF),
        unselectedItemColor: Color(0xFFF0F0F0),
        type: BottomNavigationBarType.fixed,
        currentIndex: 0,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.home, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, right: 36),
                child: Icon(Icons.dashboard, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, left: 36),
                child: Icon(Icons.star, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.person, size: 24,),
              ),
              title: Text("")
          )
        ],
      ),
      // code to change screens
      body: listItems.elementAt(_currentIndex)
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

I have no idea what is wrong with my code so please help out a beginner.

Thank you!

Answer 1

The problem is: You didn't set the currentIndex field in your BottomNavigationBar to _currentIndex. You set it to 0

The solution: Set currentIndex field in your BottomNavigationBar to _currentIndex

Like this

currentIndex: _currentIndex

Full build method code:

Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Color(0xFF856C8B),
        selectedItemColor: Color(0xFFFFFFFF),
        unselectedItemColor: Color(0xFFF0F0F0),
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex ///HERE,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.home, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, right: 36),
                child: Icon(Icons.dashboard, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, left: 36),
                child: Icon(Icons.star, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.person, size: 24,),
              ),
              title: Text("")
          )
        ],
      ),
      // code to change screens
      body: listItems.elementAt(_currentIndex)
    );
  }