如何在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

尝试使用实物图标https://docs.flutter.io/flutter/material/Icons-class.html中的图标进行某种调试，如果错误继续存在，而错误又出在另一侧，您可以发送所有代码并发送使用的资产吗？{ {3}}

Answer 3

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

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