Flutter bottomNavigationBar not change pages

Question

I have a Bottom Navigation Item that is not currently switching the pages, I have a feeling that I am not correctly implementing this, but I am unsure of what

class bottomNavigation extends StatefulWidget {
  @override
  _bottomNavigation createState() => _bottomNavigation();
}

class _bottomNavigation extends State<bottomNavigation> {
  int currentNavItem = 0;

  homeScreen home;
  agendaScreen agenda;
  List<Widget> pages;
  Widget currentPage;

  @override
  void initState(){
    home = homeScreen();
    agenda = agendaScreen();

    pages = [home, agenda];

    currentPage = home;
    super.initState();
  }



  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Colors.deepPurpleAccent,
      unselectedItemColor: Colors.grey,
      selectedFontSize: 16,
      currentIndex: currentNavItem,
      onTap: (int index) {
        setState(() {
            currentNavItem = index;
            currentPage = pages[index];
          },
        );
      },
      items: [
        BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
          ),
          title: Text("Home"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.calendar_today),
          title: Text("Agenda"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart),
          title: Text("Orders"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_balance_wallet),
          title: Text("Wallet"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.message),
          title: Text("Chat"),
        ),
      ],
    );
  }
}

I am expecting to see the agendaPage when I click on the Agenda item in the list. Where in this am I going wrong in order to implement the BottomNavigationBar correctly

Answer 1

You should put BottomNavigationBar widget inside a Scaffold .

Here's an example, taken from Flutter SDK Site :

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

// Implement body for each page here, separated by coma, in this example, we create a simple Text widget as the body for each page.
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

// When user tap on one of the navigation item
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

Answer 2

Whenever you change the internal state of a [State] object, make the change in a function that you pass to [setState]. Basically, you need to do two things -

Add the following method to your class:

void onItemTapped(int index) {
  setState(() {
    currentNavItem = index;
    currentPage = pages[index];
  });
}

and pass this function to onTab like this :

onTap: (int index){   
              setState(() {
                onItemTapped(index);
              });
          },