如何更改bottomNavigationBar的颜色？

Question

我该如何改变bottomNavigationBar的颜色？以下是我的代码片段，我无法改变小部件的颜色。

@override
  Widget build(BuildContext context) {
    return BottomNavigationBar(

      currentIndex: currentIndex,
      onTap: (selectedPosition) => onNavItemTapped(selectedPosition),
      items: <BottomNavigationBarItem>[
        widget.buildBottomNavigationBarItem(
            context, 'Discover', Icons.home, false, 0),
        widget.buildBottomNavigationBarItem(
            context, 'Chats', Icons.chat, true, 1),
      ],
    );
  }

- sudipta borah

Answer 1

请按如下方式使用：

请按照以下步骤操作：

bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
          // sets the background color of the `BottomNavigationBar`
          canvasColor: Colors.red,
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          ..........

- MUHAMMED IQBAL PA

---

这应该是被接受的答案，因为它可以与最新版本的Flutter SDK正常工作。 - Muhammad Faizan

Answer 2

您可以像这样设置BottomNavigationBarItem的backgroundColor:

return new BottomNavigationBar(
    items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
              icon: new Icon(Icons.library_books, size: 22.0),
              title: new Text("Text", style: new TextStyle(fontSize: 11.0)),
              backgroundColor: Colors.pink,
            ),
     ],
 );

- Siavash

---

这个代码完美运行，但我想知道为什么BottomNavigationBar的backgroundcolor没有生效，而BottomNavigationBarItem的backgroundColor却生效了，并且在一个item中设置背景颜色可以应用到所有的item。 - K_Chandio

Answer 3

将您的BottomNavigationBar包裹在Material小部件中，并提供color属性作为参数。

Material(
        color: Colors.blue,
        child:BottomNavigationBar(),
);

- Dhiraj Sharma

Answer 4

如果您想在应用程序中的任何位置更改BottomNavigationBar的颜色，请尝试像这样更改主部件中的画布颜色：

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      //here 
      canvasColor: Color(0xff1A535C),
    ),
    home: HomePageOrAnyThingElseAsYouWant(),
  );
}
}

- evals

Answer 5

使用Theme调用包装底部栏，其中您将通过canvasColor和primaryColor修补Theme数据。

Theme(
   data: Theme.of(context).copyWith(
     // background
     canvasColor: Colors.red, 
     // active item foreground
     primaryColor: Colors.white  
     // inactive items foreground
     textTheme: TextTheme(caption: TextStyle(color: Colors.black45)) 
   ),
   child: BottomNavigationBar()
)

- stwienert

Answer 6

导航栏的背景颜色是默认的 Material 背景颜色，所以只需将您的 BottomNavigationBar 包装在 Material Widget 中即可

return Material(
color : Colors.red,
child:new BottomNavigationBar(

      currentIndex: currentIndex,
      onTap: (selectedPosition) => onNavItemTapped(selectedPosition),
      items: <BottomNavigationBarItem>[
        widget.buildBottomNavigationBarItem(
            context, 'Discover', Icons.home, false, 0),
        widget.buildBottomNavigationBarItem(
            context, 'Chats', Icons.chat, true, 1),
      ],
    ));

- Raouf Rahiche

---

仍然无法更改条的背景颜色。 - sudipta borah

这个内容不够详细，需要提供更多细节。 - Raouf Rahiche

Answer 7

我知道这个问题很旧，很容易弄清楚，

但是为了帮助新的Flutter SDK用户，我将进行演示。让我们通过一个例子来清楚地说明我们所说的 =>

BottomNavigationBar(
      backgroundColor: Colors.red,
      items: [
        BottomNavigationBarItem(
             backgroundColor: Colors.green,
             label: text,
             icon: AnimatedContainer(
                      duration: Duration(
                         milliseconds: AppAnimationDuration.MEDIUM_ANIMATION_DURATION,
                     ),
              width: isSelected ? AppIconSize.size23 : AppIconSize.size20,
              height: isSelected ? AppIconSize.size23 : AppIconSize.size20,
              child: Container(
                      child: SvgPicture.asset(
                                iconPath,
                                 color: Colors.amber,
          ),
        ),
      ),
    )
),

BottomNavigationBar的第一个属性是backgroundColor，

该属性负责 BottomNavigationBar Widget 的整个颜色。

因此，它将以填充方式为小部件的整个背景着色。

而BottomNavigationBarItem Widget中的第二个属性也是backgroundColor，它负责底部导航栏中单个项目的背景颜色。

希望这能帮助一些人。

- Nabil alhafez

Answer 8

bottomNavigationBar有一个名为backgroundColor的字段。设置该字段可以改变颜色。

bottomNavigationBar: BottomNavigationBar(

        backgroundColor: Colors.black,

- Axes Grinds

---

虽然这段代码可能回答了问题，但您是否考虑添加一些解释来说明您解决的问题以及如何解决它？这将有助于未来的读者更好地理解您的答案并从中学习。 - dan1st