Add a gradient to text in bottomNavigationBar flutter

Question

I need to create a gradient on the text under the icon in flutter on the bottom nav bar.

This is what I have:

And this is what I'm trying to get to:

I tried this: Gradient Text in Flutter, but I couldn't quite get it to work. My issue is that I can only find a way to edit the textStyle of a selectedItem, not the Text widget itself. If I knew how to change the Title to be a separate widget I could follow the stack overflow question.

I can currently make ALL of the titles gradient, or none of them, but have not figured out a way to make them either gradient or not depending on being toggled. I have found a way to make the ICON gradient or non gradient depending on if it is selected by using this code:

BottomNavigationBarItem _createBarItem(inputTitle, inputIcon) {
return  BottomNavigationBarItem(
  activeIcon: ShaderMask(
    shaderCallback: (Rect bounds) {
      return RadialGradient(
        center: Alignment.centerLeft,
        radius: 0.5,
        colors: <Color>[
          Colors.redAccent[200],
          Colors.orangeAccent[200],
          Colors.red.shade200
        ],
        tileMode: TileMode.repeated,
      ).createShader(bounds);
    },
    child: inputIcon,
  ),
  icon: inputIcon,
  title: Text(inputTitle),
);
}

Notably, I can tap into the activeIcon property, but there does not seem to be a way to tap into an activeTitle property here.

I can use this code to edit some basic properties, but not to change the text in the way I want.

selectedLabelStyle: TextStyle(
   decoration: TextDecoration.underline
),

LonelyWolf · Accepted Answer · 2020-03-25T06:07:07.523

To do that, your _createBarItem method have to take one more argument which is position of your Item. Then compare it with the selected index and if they match you know that the item is selected and you can apply gradient to the text or whatever you like

  BottomNavigationBarItem _createBarItem(
      String inputTitle, Icon inputIcon, int position) {
    return BottomNavigationBarItem(
      activeIcon: ShaderMask(
        shaderCallback: (Rect bounds) {
          return RadialGradient(
            center: Alignment.centerLeft,
            radius: 0.5,
            colors: <Color>[
              Colors.redAccent[200],
              Colors.orangeAccent[200],
              Colors.red.shade200
            ],
            tileMode: TileMode.repeated,
          ).createShader(bounds);
        },
        child: inputIcon,
      ),
      icon: inputIcon,
      title: position == index
          ? ShaderMask(
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.centerLeft,
                  radius: 0.5,
                  colors: <Color>[
                    Colors.redAccent[200],
                    Colors.orangeAccent[200],
                    Colors.red.shade200
                  ],
                  tileMode: TileMode.repeated,
                ).createShader(bounds);
              },
              child: Text(
                inputTitle,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            )
          : Text(inputTitle),
    );
  }

OUTPUT

Add a gradient to text in bottomNavigationBar flutter

1 Answers1