Add Gradient to Label of BottomNavigationBarItem-CodePudding

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

CodePudding user response：

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.