Add Gradient to Label of BottomNavigationBarItem
The icon and active icon can also take a column widget. You can wrap the icon with a column and addthe relevant text in it and ignore the label.
Tonnanto
Updated on January 01, 2023Comments
-
Tonnanto over 1 year
In my flutter app I have a bottom navigation bar. I want to add a LinearGradient to the selected item.
I managed to add a Gradient to the Icon by using the
activeIcon
attribute of BottomNavigationBarItem.However I don't know how to add the same gradient to the label of the item. Since
BottomNavigationBarItem.title
is deprecated andBottomNavigationBarItem.label
only allows me to add a String I can not add the Gradient to the label directly.I have tried messing with the
selectedLabelStyle
of the BottomNavigationBar but had no success.Here is a screenshot of how my BottomNavigationBar looks.
Currently the Label has a single color. I want it to have the same gradient as the icon.
Does anyone know how I can achieve this?
Thank you very much!
BottomNavigationBar( onTap: onTabTapped, currentIndex: _currentPage, backgroundColor: context.appTheme.primaryBackgroundColor, type: BottomNavigationBarType.fixed, unselectedItemColor: context.appTheme.primaryTextColor, showUnselectedLabels: true, items: [ BottomNavigationBarItem( activeIcon: GradientMask( child: Icon(Icons.home_filled), gradient: context.appTheme.primaryGradient, ), icon: Icon(Icons.home_filled), label: 'Home', ), BottomNavigationBarItem( activeIcon: GradientMask( child: Icon(Icons.search), gradient: context.appTheme.primaryGradient, ), icon: Icon(Icons.search), label: 'Search', ), BottomNavigationBarItem( activeIcon: GradientMask( child: Icon(Icons.savings), gradient: context.appTheme.primaryGradient, ), icon: Icon(Icons.savings), label: 'Earnings' ), BottomNavigationBarItem( activeIcon: GradientMask( child: Icon(Icons.volunteer_activism), gradient: context.appTheme.primaryGradient, ), icon: Icon(Icons.volunteer_activism), label: 'Sharing' ), BottomNavigationBarItem( activeIcon: GradientMask( child: Icon(Icons.inventory_2), gradient: context.appTheme.primaryGradient, ), icon: Icon(Icons.inventory_2), label: 'My Items' ) ], ),