Unformatted BottomNavigationBar Flutter-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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