logo标签列表

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

dartflutter
5

我已经在我的应用程序中插入了自定义图标，但是当我运行应用程序时，图标和文本都变成了白色，而不是原来的颜色。

两个问题：

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

四个图标

enter image description here

4个回答
9

您需要为您的ButtomNavigationBar添加类型（type）

    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')
          ),

        ],

      ),
2
您可以使用以下代码来更改底部导航栏中图标的颜色。
BottomNavigationBarItem(
 icon:IconTheme(child: Icon(Icons.date_range),
   data:IconThemeData(color:Colors.yellow)),
 title:Text('Schedule')
)
2
尽管这是一个相当旧的主题，但我想分享一个关于此主题的发现，因为我处于同样的情况。根据Flutter文档，如果底部导航栏中有三个以上的项目且没有selectedItemColor，则预期行为是项目颜色默认为白色。

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

Flutter Api reference

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接