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

image

初めに

今回は、アイコンにグラデーションをつける方法について説明していきたいと思います。 アイコンにグラデーションをつける方法はいくつかあると思いますが、この記事では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にも適用できるので、興味のある方はぜひお試しください。

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More