[Flutter]アイコン(Icon)の色にグラデーションを設定するには？

Flutter

2021.11.05

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

Iconウェジェットのアイコンの色をにグラデーションを設定する方法を紹介します。

方法

Iconウェジェットのアイコンの色にグラデーションを設定するには、ShaderMaskを使います。

まず、IconウェジェットをShaderMaskのchildに指定します。

この時、Iconウェジェットの引数「color」にColors.whiteを指定してください。

ShaderMask(
  child: Icon(
    /*Your Icon*/,
    color: Colors.white, //重要
  ),
),

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

ShaderMask(
  child: Icon(
    /*Your Icon*/,
    color: Colors.white,
  ),
  shaderCallback: (Rect rect) {
    return LinearGradient(
      colors: [],
    ).
  },
),

最後に、指定したグラデーションの後ろに「.createShader(rect)」を付けます。

ShaderMask(
  child: Icon(
    /*Your Icon*/,
    color: Colors.white,
  ),
  shaderCallback: (Rect rect) {
    return LinearGradient(
      colors: [],
    ).createShader(rect);
  },
),

これでアイコンの色にグラデーションを設定できます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ShaderMask(
          child: Icon(
            Icons.flutter_dash,
            size: 300,
            color: Colors.white,
          ),
          shaderCallback: (Rect rect) {
            return LinearGradient(
              colors: [
                Colors.blue,
                Colors.green,
                Colors.yellow,
              ],
            ).createShader(rect);
          },
        ),
      ),
    );
  }