Bottom Nav Bar Not Changing Icons On Button Press In Flutter

Question

I want to use the BottomNavigationBar across some particular screens/pages, and I'm not sure if I'm doing this right. I have made a widget called BottomNavBar and have implemented it across my pages/screens. Whenever I click on, let's say Page3, it navigates to Page3 but the selected icons is always on the first icon button, like in the picture bellow.

What I had in mind is to change to the icon button (Car) for the selected screen/page, in in this case Page 3. To summarize, whenever I select a page from the BottomNavBar, the appropriate icon button should be selected and highlighted blue like in the picture above. Here is the code for the BottomNavBar:

import 'package:flutter/material.dart';
import 'screens/page_1.dart';
import 'screens/page_2.dart';
import 'screens/page_3.dart';
import 'screens/page_4.dart';
import 'screens/page_5.dart';


class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: Colors.white,
      currentIndex: _selectedIndex, // this will be set when a new tab is tapped
      showUnselectedLabels: true,
      onTap: (int index) {
        setState(() {
          _selectedIndex = index;
        });
        switch (index) {
          case 0:
            Navigator.pushNamed(context, Page1.id);
            break;
          case 1:
            Navigator.pushNamed(context, Page2.id);
            break;
          case 2:
            Navigator.pushNamed(context, Page3.id);
            break;
          case 3:
            Navigator.pushNamed(context, Page4.id);
            break;
          case 4:
            Navigator.pushNamed(context, Page5.id);
            break;
        }
      },
      type: BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.dashboard),
          label: "Page 1",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.work), 
          label: "Page 2",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.directions_car),
          label: "Page 3",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.supervised_user_circle),
          label: "Page 4",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          label: "Page 5",
        ),
      ],
    );
  }
}

And one of the 5 same pages/screens:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'components/bottom_navigation_bar.dart';

class Page1 extends StatelessWidget {
  static const String id = 'page_1';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(
          color: Colors.grey[600],
        ),
      ),
      body: SafeArea(
          child: Container(
            child: Text('THIS IS PAGE 1'),
        ),
      ),
/// Here is where have I implemented the widget
      bottomNavigationBar: BottomNavBar(),
    );
  }
}

Is this even a good way to do it or not? Any help is appreciated, thanks in advance!

Answer 1

On each page you have a bottomNavigationBar: BottomNavBar() that is reset when you navigate from page to page. So the currentIndex is always 0.

2 Solutions :

• Give the index to the BottomNavBar widget
• Do not navigate to page, but load widget like this exemple : https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(