flutterdartflutter-layoutandroid-navigation-bar

Unformatted BottomNavigationBar Flutter

I created a simple bottom navigation bar, (my code below)...

bottomNavigationBar: BottomNavigationBar(
    backgroundColor: COLOR_WHITE,
    items: const [
        BottomNavigationBarItem(
        icon: Icon(Icons.account_circle_rounded),
        label: 'Profile',
        ),
        BottomNavigationBarItem(
        label: 'something', icon: Icon(Icons.star)),
   ],
)

enter image description here

...but then I really wanted to click on the icons, so I tried adding an Icon Button for its onPressed() method.

bottomNavigationBar: BottomNavigationBar(
     backgroundColor: COLOR_WHITE,
     items: [
          BottomNavigationBarItem(
              icon: IconButton(
                    icon: const Icon(Icons.account_circle_rounded),
                    onPressed: () {
                      Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) => ProfileScreen(userID :widget.userID)),
                    );
                    },
                  ), 
              label: "Profile"
                ),

          BottomNavigationBarItem(
              label: 'something', icon: Icon(Icons.star)),
            ],
),

enter image description here

It gets all ugly, and I wanted the paddings and size all around to remain the same, but since I didn't add code to change those features, I don't get why it happened in the first place. Can someone help me solve it? Thanks!!

Solution

  • BottomNavigationBar has an onTap method you can use to trigger your callbacks so you don't need an IconButton. onTap gives you the index of the item tapped so you can map it to the appropriate page. You can also update the currentIndex property on the BottomNavigatorBar to highlight the appropriate item.

    See this documentation for BottomNavigationBar for a good example: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html