Стиль BottomNavigationBar во Flutter

Я пробую Flutter и пытаюсь изменить цвет BottomNavigationBar в приложении, но все, что я смог добиться, - это изменить цвет BottomNavigationItem (значок и текст).

Вот где я объявляю свой BottomNavigationBar:

class _BottomNavigationState extends State<BottomNavigationHolder>{

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
      ),
    );
  }

Раньше я думал, что выяснил это, отредактировав canvasColor на зеленый в моей основной теме приложения, но это испортило всю цветовую схему приложения:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.green
      ),
      home: new FirstScreen(),
    );
  }
}

person spongyboss    schedule 15.03.2018    source источник
comment
Я также хотел изменить большую часть нижней навигации, в итоге я просто скопировал весь код нижней навигации и изменил то, что хотел. Я полагаю, что это одно из главных преимуществ Flutter - открытость и легкость в этом. Я сделал это: pbs.twimg.com/media/DPkoxKWX0AEg9tF.jpg:large   -  person Rene    schedule 16.03.2018


Ответы (10)


Нет возможности указать цвет фона для BottomNavigationBar, кроме как изменить canvasColor. Один из способов добиться этого, не испортив все приложение, - это заключить BottomNavigationBar в Theme с желаемым canvasColor.

Пример:

  bottomNavigationBar: new Theme(
    data: Theme.of(context).copyWith(
        // sets the background color of the `BottomNavigationBar`
        canvasColor: Colors.green,
        // sets the active color of the `BottomNavigationBar` if `Brightness` is light
        primaryColor: Colors.red,
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
    child: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.add),
          title: new Text("Add"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.delete),
          title: new Text("Delete"),
        )
      ],
    ),
  ),

Надеюсь, это поможет!

person Hemanth Raj    schedule 16.03.2018
comment
Большое вам спасибо, сэр. Сработало отлично. Знаете ли вы, как изменить цвета неактивных значков на нижней панели навигации? - person spongyboss; 16.03.2018
comment
ThemeData имеет свойство disabledColor, попробуйте установить его. - person Hemanth Raj; 16.03.2018
comment
Я действительно пытался установить все доступные атрибуты в ThemeData, чтобы изменить цвет неактивного значка, и ни один из них не дал эффекта. Даже disabledColor - person spongyboss; 16.03.2018
comment
Фактически отключенный цвет выбирается из caption из textTheme. Я обновил свой ответ, чтобы показать, как вы можете этого добиться. Надеюсь, это поможет! - person Hemanth Raj; 16.03.2018
comment
человек ты лучший! Большое вам спасибо .. Честно говоря, я сомневаюсь, что смог бы понять это сам! Огромное спасибо!! - person spongyboss; 16.03.2018
comment
@HemanthRaj, когда я использую эту тему для изменения цвета нижней навигации, тень нижней панели навигации не отображается. Не могли бы вы рассказать мне, как показать тень нижней панели навигации? - person Deepak Rana; 01.06.2018
comment
@WitVault Вы можете разместить контейнер с градиентом за нижней панелью навигации и сделать нижнюю панель навигации прозрачным. Я сам не пробовал, надеюсь, вы сможете попробовать. - person Hemanth Raj; 31.07.2018
comment
Почему это не работает со сменой типа? Как бы вы это обозначили? - person Morosko; 05.09.2018
comment
Изменение типа на фиксированный решает все проблемы. Не нужно оборачивать виджет темы или что-то в этом роде. Связанные с темами свойства уже доступны в виджете нижней навигации, поэтому виджет темы вам не понадобится. - person jashgopani; 14.12.2019

введите описание изображения здесь

Раньше не было прямого способа установить цвета, но теперь можно использовать.

BottomNavigationBar(
  backgroundColor: Colors.red,
  selectedItemColor: Colors.black,
  unselectedItemColor: Colors.white,
  ...
)  
person CopsOnRoad    schedule 20.07.2019
comment
Это работает, спасибо. И, кстати, не забудьте удалить цвет значка в BottomNavigationBarItem. - person DomonLee; 24.06.2021

Принятый ответ не совсем неверен. Однако на самом деле BottomNavigationBar имеет свойство backgroundColor. Согласно документации

Если типом является BottomNavigationBarType.shifting и для элементов задано значение BottomNavigationBarItem.backgroundColor, backgroundColor элемента будет всплескивать и перезаписывать этот цвет.

Это означает, что backgroundColor BottomNavigation будет замещен backgroundColor отдельных элементов, потому что тип по умолчанию - BottomNavigationBarType.shifting.

Чтобы исправить это, просто добавьте следующее свойство к объявленному виджету BottomNavigationbar.

type: BottomNavigationBarType.fixed,

Примечание. Однако если вам нужен эффект смещения, вам придется объявить цвета для каждого элемента или обернуть виджет, который позволяет переопределить цвет фона дочерних виджетов.

То есть что-то вроде виджета Container.

person MagicMike    schedule 11.07.2019
comment
я изменил type: BottomNavigationBarType.shifting на type: BottomNavigationBarType.fixed. это сработало для меня, спасибо - person Wilmer; 21.01.2020
comment
У меня была проблема с автоматическим изменением backgroundColor на белый, как только я добавляю 4 детей. После установки типа navBar на fixed он перестал автоматически меняться. - person KingJinho; 13.08.2020

можно изменить, установив цвета для свойства backgroundColor, если тип фиксирован.

BottomNavigationBar(
          backgroundColor: Colors.red,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
                icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text('Home'),),
            BottomNavigationBarItem(
                icon: Icon(Icons.work,color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text('Self Help'),),
            BottomNavigationBarItem(
                icon:Icon(Icons.face, color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text('Profile'),),
          ]
        )

Если тип смещается, он будет использовать цвет внутри bottomNavigationBarItem.

BottomNavigationBar(
          backgroundColor: Colors.red,
          type: BottomNavigationBarType.shifting,
          items: [
            BottomNavigationBarItem(
                icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text('Home'),
                backgroundColor: Colors.red),
            BottomNavigationBarItem(
                icon: Icon(Icons.work,color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text('Self Help'),
                backgroundColor: Colors.blue),
            BottomNavigationBarItem(
                icon:Icon(Icons.face, color: Color.fromARGB(255, 255, 255, 255)),
                title: new Text('Profile'),
                backgroundColor: Colors.amber),
          ]

        )

Вы можете видеть, хотя я установил свойство backgroundColor, оно не применяет эти цвета, а цвет фона внутри виджета BottomNavigationBarItem переопределит это.

Найдено здесь

person Ishan Fernando    schedule 30.01.2020
comment
title теперь устарел, он говорит использовать вместо этого label, который принимает String - person MSpeed; 06.04.2021

Задайте следующие свойства, чтобы изменить цвета фона, выбранного и невыбранного

bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        ...
)
person Rahul Panzade    schedule 16.07.2020
comment
type: BottomNavigationBarType.fixed, это свойство очень важно - person herbert ichama; 07.11.2020

В настоящее время вы можете стилизовать их BottomNavigationBar прямо из Theme, например:

ThemeData(
     
      bottomNavigationBarTheme: BottomNavigationBarThemeData(
        backgroundColor: Colors.grey[900],
        elevation: 10,
        selectedLabelStyle: TextStyle(
            color: Color(0xFFA67926), fontFamily: 'Montserrat', fontSize: 14.0),
        unselectedLabelStyle: TextStyle(
            color: Colors.grey[600], fontFamily: 'Montserrat', fontSize: 12.0),
        selectedItemColor: Color(0xFFA67926),
        unselectedItemColor: Colors.grey[600],
        showUnselectedLabels: true,
      ),

)

person restInPieces    schedule 10.08.2020

title устарел. Вместо этого мы используем label.
Для label мы можем использовать соответствующие атрибуты: selectedLabelStyle, unselectedLabelStyle.
Например:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Theme.of(context).accentColor,
          selectedFontSize: 0,
          unselectedFontSize: 0,
          iconSize: 22,
          elevation: 0,
          backgroundColor: Colors.transparent,
          selectedIconTheme: IconThemeData(size: 28),
          unselectedItemColor: Theme.of(context).focusColor.withOpacity(1),
          selectedLabelStyle: Theme.of(context).textTheme.bodyText1.merge(TextStyle(fontSize: 12)),
          unselectedLabelStyle: Theme.of(context).textTheme.button.merge(TextStyle(fontSize: 11)),
          showUnselectedLabels: true,
          currentIndex: widget.currentTabIdx,
          onTap: (int i) {
            this._selectTab(i);
          },
          showSelectedLabels: true,
          // this will be set when a new tab is tapped
          items: [
            BottomNavigationBarItem(
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_HOME) ,
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_HOME, color: Theme.of(context).accentColor),
              label: 'Home',
            ),
            BottomNavigationBarItem(
                label: 'Categories',
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CATEGORY),
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CATEGORY, color: Theme.of(context).accentColor) ,
            ),
            BottomNavigationBarItem(
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_ORDER_HISTORY, ) ,
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_ORDER_HISTORY, color: Theme.of(context).accentColor ) ,
              label: 'Order History',
            ),
            BottomNavigationBarItem(
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CART,) ,
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CART, color: Theme.of(context).accentColor) ,
              label: 'Cart',
            ),
          ],
person Mr Special    schedule 03.11.2020

Попробуйте обернуть свой BottomNavigationBar в Container, затем установите его color.

Пример:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages(),
      bottomNavigationBar:new Container(
        color: Colors.green,
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: const Icon(Icons.home),
                title: Text("Home")
            ),
            BottomNavigationBarItem(
                icon: const Icon(Icons.work),
                title: Text("Self Help")
            ),
            BottomNavigationBarItem(
                icon: const Icon(Icons.face),
                title: Text("Profile")
            )
          ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        ),
      );
    );
  };
person Billybogz    schedule 07.11.2018
comment
не устанавливайте appBar вообще, если вы просто делаете его нулевым. вероятно, он имеет значение по умолчанию - person Alex Jone; 28.02.2019

Просто следуйте приведенному ниже коду, чтобы настроить его в соответствии с вашими требованиями. Вам просто нужно установить родительский элемент NavigationBar с Theme и установить canvasColor, чтобы изменить цвет фона.

      bottomNavigationBar: Theme(
    data: Theme.of(context).copyWith(
      canvasColor: kOrangeMaterialColor
    ),
    child: BottomNavigationBar(
      type: BottomNavigationBarType.shifting,
      currentIndex: _currentIndex,
      onTap: _onTapItem,

      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home,
        color: kWhiteColor,),
        label: ''),
        BottomNavigationBarItem(icon: Icon(Icons.notifications,
        color: kWhiteColor,),
        label: ''),
        // BottomNavigationBarItem(icon: Icon(Icons.favorite_border,
        // color: kWhiteColor,),
       // label: ''),
        BottomNavigationBarItem(icon: Icon(Icons.account_circle,
        color: kWhiteColor,),
        label: ''),
        BottomNavigationBarItem(icon: Icon(Icons.settings,
        color: kWhiteColor,),
        label: ''),
      ],
    ),
  ),
person Abdul Mateen    schedule 25.02.2021

Просто добавьте свойство backgroundColor в BottomNavigationBarwidget.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        backgroundColor: Colors.black45,
      ),
    );
  }
person mjhansen3    schedule 14.06.2019