Unformatted BottomNavigationBar Flutter

Question

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)),
   ],
)

...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)),
            ],
),

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!!

Answer 1

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

Answer 2

the mistake you have made was in the first BottomNavigationBarItem you have IconButton Widget and in second Icon widget... both having different styles by default(flutter developers gave default values for padding size etc)... so below code will work. i implemented locally and checked as well..

BottomNavigationBar(
                backgroundColor: Colors.white,
                items: [
                  BottomNavigationBarItem(
                      icon: IconButton(
                        icon: const Icon(Icons.account_circle_rounded),
                        onPressed: () {
                          Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) => 
                      ProfileScreen(userID:widget.userID)),
                    );
                        },[enter image description here][1]
                      ),
                      label: "Profile"
                  ),
                   BottomNavigationBarItem(
                      label: 'something', icon: IconButton(
                    icon: const Icon(Icons.star),
                    onPressed: () {
                    },
                  ),),
                ],
              )

enter image description here