I have a Navigation bar that I am using for my Flutter app, and while I can properly navigate to the different screens I have set up, the selected icon will not display.

Here is what I have for my Navigation Bar:

BottomNavigationBar(
          items: [
            const BottomNavigationBarItem(
                icon: Icon(
                  Icons.home_filled,
                ),
                label: "Home"),
            BottomNavigationBarItem(
                icon: SvgPicture.asset(
                  "assets/images/messages.svg",
                ),
                label: "Messages"),
            BottomNavigationBarItem(
                icon: SvgPicture.asset(
                  "assets/images/notifications.svg",
                ),
                label: "Notifications"),
            BottomNavigationBarItem(
                icon: SvgPicture.asset(
                  "assets/images/settings.svg",
                ),
                label: "Settings")
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: primaryBlue,
          unselectedItemColor: Colors.black,
          showUnselectedLabels: true,
          onTap: _onItemTapped,
        ),

Here is what I have tried:

• Setting selectedItemColor and unselectedItemColor (pictured above).
• Setting color on each specific icon. i.e. color: selectedIndex == 0 ? color1 : color2

Here are some other things that I am declaring within the Widget build

    int _selectedIndex = 0;

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

    void _onItemTapped(int index) {
      _pageController.jumpToPage(index);
    }

Console printing _selectedIndex onTap returns the proper index.

Thank you for your help!

CodePudding user response：

Declare variables outside the build method else Variable will get same data on every build(while setState happens). Also update _selectedIndex on _onItemTapped.

  int _selectedIndex = 0;

  void _onPageChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  void _onItemTapped(int index) {
    // _pageController.jumpToPage(index);
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
    //...

CodePudding user response：

Your variables and methods should be outside the build method like this

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final PageController _pageController = PageController();

  int _selectedIndex = 0; //New

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _pageController.jumpToPage(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar'),
      ),
      body: PageView(
        controller: _pageController,
        children:  const <Widget>[
          Icon(
            Icons.home_filled,
            size: 150,
          ),
          Icon(
            Icons.message,
            size: 150,
          ),
          Icon(
            Icons.notifications,
            size: 150,
          ),
          Icon(
            Icons.settings,
            size: 150,
          ),

        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home_filled,
              ),
              label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.message),
              // icon: SvgPicture.asset(
              //   "assets/images/messages.svg",
              // ),
              label: "Messages"),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications),

              // icon: SvgPicture.asset(
              //   "assets/images/notifications.svg",
              // ),
              label: "Notifications"),
          BottomNavigationBarItem(
              // icon: SvgPicture.asset(
              //   "assets/images/settings.svg",
              // ),
              icon: Icon(Icons.settings),
              label: "Settings")
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.black,
        showUnselectedLabels: true,
        onTap: _onItemTapped,
      ),
    );
  }
}