【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にも適用できるので、興味のある方はぜひお試しください。

お知らせ

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

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

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

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

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

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

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

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

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

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

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

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

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

Read More