Flutter开发：BottomNavigationBarItem图标不显示问题求助

你遇到的问题源于使用了BottomNavigationBarType.shifting类型，这种模式要求为每个BottomNavigationBarItem指定backgroundColor，否则会出现图标显示异常（比如颜色与背景融合导致不可见）。

方案1：改用默认fixed类型（推荐） #

如果不需要切换时的位移动画效果，直接移除type: BottomNavigationBarType.shifting，使用默认的fixed类型，图标会正常遵循你设置的选中/未选中颜色：

import 'package:flutter/material.dart';
import 'package:task_manager/style/style.dart';

BottomNavigationBar AppBottomNav(currentIndex, OnItemTapped) {
  return BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.list_alt),
        label: "New",
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.access_time_rounded),
        label: "Progress",
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.check_circle_outlined),
        label: "Completed",
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.cancel),
        label: "Canceled",
      ),
    ],
    selectedItemColor: colorGreen,
    unselectedItemColor: colorLightGray,
    currentIndex: currentIndex,
    showSelectedLabels: true,
    showUnselectedLabels: true,
    onTap: OnItemTapped,
    // 移除shifting类型，使用默认fixed模式
  );
}

方案2：保留shifting类型并添加背景色 #

如果需要保留位移动画效果，需为每个BottomNavigationBarItem添加backgroundColor，同时确保图标颜色与背景色有明显对比（shifting模式下选中状态的图标会自动变为白色）：

import 'package:flutter/material.dart';
import 'package:task_manager/style/style.dart';

BottomNavigationBar AppBottomNav(currentIndex, OnItemTapped) {
  return BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.list_alt),
        label: "New",
        backgroundColor: colorGreen,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.access_time_rounded),
        label: "Progress",
        backgroundColor: Colors.blue,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.check_circle_outlined),
        label: "Completed",
        backgroundColor: Colors.orange,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.cancel),
        label: "Canceled",
        backgroundColor: Colors.red,
      ),
    ],
    selectedItemColor: Colors.white,
    unselectedItemColor: colorLightGray,
    currentIndex: currentIndex,
    showSelectedLabels: true,
    showUnselectedLabels: true,
    onTap: OnItemTapped,
    type: BottomNavigationBarType.shifting,
  );
}

内容的提问来源于stack exchange，提问作者Abdul Halim