title: Unformatted BottomNavigationBar Flutter
body: <p>I created a simple bottom navigation bar, (my code below)...</p>
  <pre><code>bottomNavigationBar: BottomNavigationBar(
      backgroundColor: COLOR_WHITE,
      items: const [
          BottomNavigationBarItem(
          icon: Icon(Icons.account_circle_rounded),
          label: 'Profile',
          ),
          BottomNavigationBarItem(
          label: 'something', icon: Icon(Icons.star)),
     ],
  )
  </code></pre>
  <p><a href="https://i.stack.imgur.com/W92Rd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W92Rd.png" alt="enter image description here" /></a></p>
  <p>...but then I really wanted to click on the icons, so I tried adding an Icon Button for its onPressed() method.</p>
  <pre><code>bottomNavigationBar: BottomNavigationBar(
       backgroundColor: COLOR_WHITE,
       items: [
            BottomNavigationBarItem(
                icon: IconButton(
                      icon: const Icon(Icons.account_circle_rounded),
                      onPressed: () {
                        Navigator.of(context).pushReplacement(
                        MaterialPageRoute(builder: (context) =&gt; ProfileScreen(userID :widget.userID)),
                      );
                      },
                    ), 
                label: &quot;Profile&quot;
                  ),
  
            BottomNavigationBarItem(
                label: 'something', icon: Icon(Icons.star)),
              ],
  ),
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/1j9yp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1j9yp.png" alt="enter image description here" /></a></p>
  <p>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!!</p>