Flutter bottom navigation bar items not aligned

Question

In my newspaper app, the left-most bottom navigation bar item is always showing up at a higher position than the other items, it is not aligned.

You can see the bookmark icon is not aligned with the others. In fact, if I put any other icon in the first position, that icon is showing up at a higher position. The problem is with that first item no matter what icon I add there.

Code for the BottomNavigationBar

import 'package:flutter/material.dart';
import 'package:news_app/main.dart';

BottomNavigationBar getBottomNavBar(themeProvider, context, appbarScrollController, refresh) {
  return BottomNavigationBar(
    elevation: 3,
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
          icon: Icon(
            Icons.bookmark,
            color: themeProvider.themeMode == ThemeMode.light ? Colors.black : Colors.white,
          ),
          label: ""
      ),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.home_sharp,
            color: themeProvider.themeMode == ThemeMode.light ? Colors.black : Colors.white,
          ),
          label: ""
      ),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.subject,
            color: themeProvider.themeMode == ThemeMode.light ? Colors.black : Colors.white,
          ),
          label: ""
      ),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.video_collection,
            color: themeProvider.themeMode == ThemeMode.light ? Colors.black : Colors.white,
          ),
          label: ""
      ),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.more_horiz,
            color: themeProvider.themeMode == ThemeMode.light ? Colors.black : Colors.white,
          ),
          label: ""
      ),
    ],
    onTap: (index) {
      
    },
  );
}

I kept all the labels blank as I don't need them. It appears the same in all the screens with this alignment problem.

Josteve Adekanbi · Accepted Answer · 2022-01-23 14:08:53Z

4

According to the documentation:

If type is not specified, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.

And since you have more than 3 items, the type changed to BottomNavigationBarType.shifting which shifts the selected item slightly upward.

Try this:

 BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   ...
 )

edited Jan 23, 2022 at 14:08

answered Jan 23, 2022 at 14:05

Josteve Adekanbi

12.8k1 gold badge31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flutter bottom navigation bar items not aligned

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related