Flutter Persistent BottomBar新增项后图标及文本变白问题求助

这个问题的核心是Flutter BottomNavigationBar的默认行为逻辑：

• 当导航栏item数量少于4个时，默认采用BottomNavigationBarType.fixed类型，未选中的图标/文本会继承主题默认颜色
• 当item数量≥4个时，组件会自动切换为BottomNavigationBarType.shifting类型，此时未选中的item图标和文本会默认变为白色，用于和选中item的背景色形成对比

解决方案1：强制使用fixed类型 #

直接在BottomNavigationBar中指定type为fixed，就能保持和3个item时一致的颜色表现：

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedTab,
  // 强制设置为fixed类型
  type: BottomNavigationBarType.fixed,
  onTap: (index) {
    setState(() {
      _selectedTab = index;
    });
  },
  items: widget.items
      .map((item) => BottomNavigationBarItem(
          icon: Icon(item.icon), label: item.title))
      .toList(),
),

解决方案2：自定义选中/未选中颜色 #

如果需要保留shifting类型的背景色效果，也可以手动指定颜色覆盖默认的白色：

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedTab,
  // 自定义选中和未选中的颜色
  selectedItemColor: Theme.of(context).primaryColor,
  unselectedItemColor: Colors.grey,
  onTap: (index) {
    setState(() {
      _selectedTab = index;
    });
  },
  items: widget.items
      .map((item) => BottomNavigationBarItem(
          icon: Icon(item.icon), label: item.title))
      .toList(),
),

内容的提问来源于stack exchange，提问作者Bart Stencil