Style BottomNavigationBar in Flutter

前端 未结 9 675
醉话见心
醉话见心 2020-12-12 19:22

I am trying out Flutter and I am trying to change the colour of the BottomNavigationBar on the app but all I could achieve was change the colour of the Bo

9条回答
  •  悲哀的现实
    2020-12-12 19:24

    The title is deprecated. We use label instead.
    For label, we can use corresponding attributes: selectedLabelStyle, unselectedLabelStyle.
    For example:

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

提交回复
热议问题