Flutter 底部导航栏项目未对齐

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.

Answer 1

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