Flutter BottomNavigationBar Colors

时间:2018-04-19 18:33:06

标签: dart flutter

我正在尝试更改BottomNavigation图标的选定颜色,但我似乎要实现的只是更改文本颜色。请协助:

目前,文本颜色在选中时会变为黄色,但图标会保持白色,我希望它也是黄色的,我尝试将非活动图标的图标颜色设置为灰色,就像标题一样,但它没有变形。 enter image description here

这是我的代码:

.color-change:hover {
  background:#fc9426;
}

2 个答案:

答案 0 :(得分:4)

请勿在{{1​​}}中声明图标的颜色。 您应该在BottomNavigationBarItem中将其声明为BottomNavigationBarunselectedItemColor

unselectedItemColor

这样做,您的代码将起作用。

答案 1 :(得分:1)

您已为每个图标明确设置color: Colors.white,因此在您设置之前它们将为白色。

您有几个选择:

1)将BottomNavigationBar的类型设置为type: BottomNavigationBarType.fixed并设置fixedColor: Colors.orange或您想要的任何颜色。请注意,您必须删除color: Colors.white,否则它们仍为白色。

2)您可以测试正确设置的索引,然后决定将图标直接设置为哪种颜色,即第一项为color = index == 0 ? selectedColor : unselectedColor,第二项为index==1,{{1第三个。

3)稍微替代方法是在整个BottomNavigationBar周围设置一个带有color = unselectedColor的IconTheme,然后只用item==2设置所选项目。

我建议阅读BottomNavigationBar documentation,特别是关于固定与移位的部分,因为它描述了您遇到的确切问题的答案。