【Flutter】ShaderMaskを使ってアイコンにグラデーションをつける

初めに

今回は、アイコンにグラデーションをつける方法について説明していきたいと思います。 アイコンにグラデーションをつける方法はいくつかあると思いますが、この記事ではShaderMaskを使っていきます。よろしくお願いします。

ShaderMaskを使ってアイコンにグラデーションをつける

ShaderMaskの使い方自体は簡単で、アイコンをShaderMaskでラップして、色やグラデーションの方向などを設定することでWidgetにグラデーションをつけることができます。

試しにInstagramのアイコンにグラデーションをつけて、それっぽいデザインを作ってみます。

FlutterにはInstagramのアイコンが標準で用意されていないため、今回はfont_awesome_flutterを使います。

比較できるようにデフォルトのアイコンとグラデーションをかけたアイコンを載せておきます。

以下がサンプルコードです。

body: Center(
  child: ShaderMask(
    shaderCallback: (Rect bounds) {
      return const LinearGradient(
        begin: Alignment.bottomLeft,
        end: Alignment.topRight,
        stops: [
          0.1,
          0.6,
          0.9,
        ],
        colors: <Color>[
          Colors.yellow,
          Colors.red,
          Colors.purple,
        ],
        tileMode: TileMode.mirror,
      ).createShader(bounds);
    },
    child: const FaIcon(
      FontAwesomeIcons.instagram,
      color: Colors.white,
      size: 100,
    ),
  ),
),

解説

コードの解説の前に、グラデーションの種類について軽く説明します。

FlutterにはLinerGradient、RadialGradient、SweepGradientの三種類のグラデーションがあります。

• LinerGradient：色が直線的に変化するグラデーション。
• RadialGradient：Widgetの中心からの位置で色が変化するグラデーション。
• SweepGradient：Widgetの真ん中を中心として回るように色が変化するグラデーション

またtileModeという、グラデーションが色の変化の終わる場所（エッジ）に来たときの挙動についても4種類あります。

• clamp：エッジを超えた部分はエッジに最も近い色で塗られる
• decal：エッジを超えた部分は透明色で塗られる
• mirror：エッジを超えたらグラデーションが逆方向になって繰り返されていく
• repeated：エッジを超えたらグラデーションの方向は変わらず繰り返されていく

詳しくはこちらの公式ページに画像があるので参考にしてください。

今回はグラデーションの中のLinerGradientについて解説します。

まずLinerGradientではグラデーションの始まる位置と終わる位置を示すbeginとtopがあり、今回の場合は左下から右上に向かってグラデーションが行われます。

その下にあるstopsではグラデーションの色がそれぞれWidgetの中でどの程度占めるかを制御します。

最後にcolorsで色を設定します。グラデーションが始まる順番で書いていくので、今回の場合は左下からyellow、red、purpleの順番になります。

最後に

今回はShaderMaskを使ってアイコンにグラデーションをつけましたが、TextやImageにも適用できるので、興味のある方はぜひお試しください。