[Flutter]Textウェジェットのテキストカラーをグラデーションにするには？

Flutter

2021.11.04

どうも、ちょげ(@chogetarou)です。

Textウェジェットのテキストの色をグラデーションにする方法を紹介します。

方法

Textウェジェットのテキストの色をグラデーションにするには、ShaderMaskを使います。

まず、TextをShaderMaskでラップします。

この時、テキストの色を白に設定しておきます。

ShaderMask(
  child: Text(
    'Flutter',
    style: TextStyle(
      color: Colors.white, //テキストの色を白に設定
    ),
  ),
),

次に、ShaderMaskの引数「shaderCallback」に関数を指定し、戻り値としてグラデーションを指定します。

ShaderMask(
  child: Text(
    'Flutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  shaderCallback: (Rect rect) {
    return LinearGradient(
      colors: [/*グラデーション*/],
    )
  },
),

最後に、戻り値としてグラデーションの後ろに「.createSahder(rect)」を付けます。

ShaderMask(
  child: Text(
    'Flutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  shaderCallback: (Rect rect) {
    return LinearGradient(
      colors: [/*グラデーション*/],
    ).createShader(rect);
  },
),

これでテキストの色をグラデーションにすることが出来ます。

以下は、使用例です。

ShaderMask(
  child: Text(
    'Flutter',
    style: TextStyle(
      fontSize: 60,
      color: Colors.white,
    ),
  ),
  shaderCallback: (Rect rect) {
    return LinearGradient(
      colors: [
        Colors.blue,
        Colors.green,
        Colors.yellow,
      ],
    ).createShader(rect);
  },
),