为 BottomNavigationBarItem 的标签添加渐变

Question

在我的 flutter 应用程序中，我有一个底部导航栏。我想给选中的项目添加一个LinearGradient。

我设法使用 BottomNavigationBarItem 的 activeIcon 属性向图标添加渐变。

但是我不知道如何为项目的标签添加相同的渐变。由于 BottomNavigationBarItem.title 已被弃用并且 BottomNavigationBarItem.label 只允许我添加一个字符串，所以我不能直接将渐变添加到标签。

我试过修改 BottomNavigationBar 的 selectedLabelStyle 但没有成功。

这是我的 BottomNavigationBar 外观的屏幕截图。目前标签只有一种颜色。我希望它具有与图标相同的渐变。

有谁知道我怎样才能做到这一点？

非常感谢！

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

Answer 1

图标和活动图标也可以带一个列小部件。您可以用一列包裹图标并在其中添加相关文本并忽略标签。

为 BottomNavigationBarItem 的标签添加渐变

Add Gradient to Label of BottomNavigationBarItem

gradient

navigationbar

flutter