为 BottomNavigationBarItem 的标签添加渐变答案

【问题标题】：Add Gradient to Label of BottomNavigationBarItem为 BottomNavigationBarItem 的标签添加渐变
【发布时间】：2021-10-23 19:26:01
【问题描述】：

在我的颤振应用程序中，我有一个底部导航栏。我想为所选项目添加一个 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'
            )
          ],
        ),

【问题讨论】：

标签： flutter gradient navigationbar

【解决方案1】：

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

【讨论】：