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),
      ],
    );
  }

Answer 1

将BottomNavigationBar包装在Material小部件中，并将color属性设置为

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

Answer 2

请这样使用：

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

Answer 3

您可以设置E的{{1}}，如下所示：

backgroundColor

Answer 4

导航栏的背景颜色是默认的材质背景颜色，因此只需将BottomNavigationBar包裹在材质窗口小部件中

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),
      ],
    ));

Answer 5

用主题调用包装底部的栏，在其中使用canvasColor和primaryColor修补主题数据。

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()
)

Answer 6

bottomNavigationBar具有一个名为backgroundColor的字段。设置此字段会更改颜色。

bottomNavigationBar: BottomNavigationBar(

        backgroundColor: Colors.black,

Answer 7

如果您想更改应用中各处BottomNavigationBar 的颜色，请尝试像这样更改主小部件中的画布颜色：

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

如何更改bottomNavigationBar的颜色？

7 个答案: