dart - 如何在 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')
          ),

        ],

      ),