如何在 Flutter 上更改 BottomNavigationBar 项目的颜色？

Question

我已将自定义图标插入到我的应用程序中，当我运行该应用程序时，图标和文本是白色的，而不是原始颜色。

两个问题：

1) 图标原本是黑色的，但当我将其插入底部导航项目时，它们会变成白色。

2）也只有第一个项目在图标下方有标题，其余项目没有。

这是我的代码

      bottomNavigationBar: BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
          title: Text('Ideas')
        ),
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
          title: Text('Profile')
        ),
        BottomNavigationBarItem(
            icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
            title: Text('Bag')
        ),

      ],
  ),

//pubspec.yaml file

  fonts:
- family: navBar
  fonts:
    - asset: assets/fonts/ic_navbar.ttf

4个图标

Answer 1

您需要为ButtomNavigationBar添加类型

    bottomNavigationBar: BottomNavigationBar(

        //Add this line will fix the issue.
        type: BottomNavigationBarType.fixed,

        currentIndex: 0, // this will be set when a new tab is tapped
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: new Icon(const IconData(0xe903, fontFamily: 'navBar')),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
            title: new Text('Messages'),
          ),
          BottomNavigationBarItem(
              icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
              title: Text('Profile'),
          ),
          BottomNavigationBarItem(
              icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
              title: Text('Bag')
          ),

        ],

      ),

Answer 2

虽然这是一个相当古老的线程，但我想分享关于这个主题的发现，因为我处于同样的情况。 根据 flutter 文档，如果底部导航栏中有 3 个以上的项目并且没有 selectedItemColor，则项目颜色默认为白色是预期的行为。

BottomNavigationBarType.shifting，当有四个或更多项时的默认值。 如果 selectedItemColor 为 null，则所有项目都呈现为白色。 导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor 相同。 在这种情况下，假设每个项目将具有不同的背景颜色，并且该背景颜色将与白色形成鲜明对比。

Flutter API 参考

Answer 3

尝试使用材料图标https://docs.flutter.io/flutter/material/Icons-class.html中的图标进行调试，如果错误继续存在，则错误在另一侧，您可以发送所有代码并发送您使用的资产？ 在此处输入图片说明

Answer 4

您可以使用以下代码更改底部导航栏中的图标颜色

BottomNavigationBarItem(
 icon:IconTheme(child: Icon(Icons.date_range),
   data:IconThemeData(color:Colors.yellow)),
 title:Text('Schedule')
)