I want to apply shadermask on a text widget which has just 3 letters. I want each letter to have a different color mentioned on the gradient. With the below code what I get now is a rectangular border with a color gradient. I dont want a border, but want the colors to be applied on the characters.

child: ShaderMask(
                  blendMode: BlendMode.color,
                  shaderCallback: (shader) {
                    return const LinearGradient(colors: [Colors.red,Colors.green,Colors.blue],begin:Alignment.topLeft,end:Alignment.bottomRight).createShader(shader);
                  },
                  child: Text(
                    stepTitle,
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: stepFont, ),
                  ),
                ),

CodePudding user response：

Try this:

1. Remove BlendMode.color
2. Set the color of the Text to Colors.white

Like so:

ShaderMask(
    shaderCallback: (shader) {
      return LinearGradient(
        colors: [
          Colors.red,
          Colors.green,
          Colors.blue,
        ],
        tileMode: TileMode.mirror,
      ).createShader(shader);
    },
    child: Text(
      stepTitle,
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
        fontSize: stepFont,
      ),
    ),
  )