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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (99)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)flutter (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More