Блог

Я хочу применить шейдерную маску к текстовому виджету, в котором всего 3 буквы. Я хочу, чтобы каждая буква имела другой цвет, указанный на градиенте. С помощью приведенного ниже кода я получаю прямоугольную границу с цветовым градиентом. Мне не нужна граница, но я хочу, чтобы цвета применялись к персонажам.

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

Попробуй это:

1. Удалять BlendMode.color
2. Установите цвет Text на Colors.white

Вот так:

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