【Flutter】ShaderMask活用法！引き立つグラフィックエフェクトの作り方

Widget

対象者

  • Flutterを用いたアプリケーション開発に携わっており、そのビジュアル表現をより豊かにしたいと考えている方
  • ShaderMaskやBlendModeなど、具体的な技術の理解を深め、それを具体的なプロジェクトに活かす方法を学びたい方
  • クリエイティブなビジュアルエフェクトを作成するための新たな手法やアイデアを探求している方

はじめに

Flutterでのアプリ開発は楽しいけれど、ユーザーエクスペリエンスを高めるためには、ただ機能を追加するだけでは足りませんよね。ビジュアル表現の一環として、エフェクトの利用は大きな可能性を秘めています。Flutterには、そんなビジュアル表現を強力にバックアップする機能、ShaderMaskが存在します。これを使えば、アプリケーションの見た目を大きく変えることが可能です。

しかし、ShaderMaskを効果的に活用するためには、その働きやプロパティを理解することが重要です。特に、BlendModeやLinearGradientなどの設定が、どのように結果に影響を及ぼすのかを知ることは、理想的なエフェクトを創出するための第一歩と言えるでしょう。

ShaderMaskというのはプログラムの世界では、一般的に「描画に対する特別な効果を適用するためのマスク」ということを示します。
Flutterにおいては、特定の描画領域に特別な効果（シェーディング）を適用するウィジェットです。そのため、特定の部分に対して色のグラデーションや、テクスチャの適用といった視覚的な効果を適用することができます。
実際のアプリとしては、ユーザのプロフィール画像に対して特定の色のオーバーレイを適用したり、背景画像に対して色彩強調のエフェクトを追加したりといったケースにShaderMaskを利用し、高度な視覚的効果を実現することができます。

この記事では、ShaderMaskの基本的な説明から、活用例など、詳細にわたり解説します。具体的なコード例を交えながらの説明なので、理論的な理解と実践的なスキルを同時に身につけることができます。

あなたがFlutterの世界で、自分だけの色彩豊かなアプリを創造するための一助になれば幸いです。さあ、一緒にShaderMaskの魅力を探り、ビジュアル表現の新たな地平を開拓しましょう。

ShaderMaskとは

ShaderMaskの基本的な説明

ShaderMaskは、その子ウィジェットに対してさまざまな視覚効果を提供するFlutterのウィジェットです。基本的に、ShaderMaskはShaderで生成されたマスクを子に適用します。例えば、端のフェードや火のようなテキスト効果などを提供できます。ShaderMaskにはblendMode、child、shaderCallbackなどのプロパティがあります。このウィジェットを使用すると、特定のウィジェットに対して動的に視覚効果を追加できます。

ShaderMaskの具体的な利用シーン

ShaderMaskの利用シーンは多岐にわたりますが、主に視覚的な装飾を目的としたシーンで利用されます。例えば、テキストや画像に対してグラデーション効果を追加したいときなどです。また、特定の部分だけをハイライトするためのマスクとしても利用できます。

具体的な例を見てみましょう。次のコードは、テキストウィジェットに対してLinearGradientを使用してグラデーション効果を適用しています。

ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (bounds) => LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.blue, Colors.red],
  ).createShader(bounds),
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 40),
  ),
)

このコードは”Hello Flutter”というテキストに上から下へ青から赤へのグラデーションを適用します。

ShaderMaskは非常に強力なツールであり、効果的に使用すればアプリケーションのUIを大幅に向上させることが可能です。ただし、適切に使用しないと意図しない結果をもたらす可能性もあるため注意が必要です。

ShaderMaskのプロパティについて

blendModeプロパティの詳細

FlutterのShaderMaskには、その視覚的な挙動を制御するためのいくつかの重要なプロパティが存在します。その中でも特に重要なのがblendModeプロパティです。blendModeは、マスク（シェーダー）と子ウィジェットの色をどのように混合するかを決定します。このプロパティを使用することで、ウィジェットに様々な視覚的な効果を与えることができます。

Flutterでは、BlendModeクラスを使用して、色の混合方法を表すさまざまな定数を提供しています。たとえば、BlendMode.clearは、子ウィジェットの色を完全に消去し、BlendMode.colorは、シェーダーの色を保持しながら子ウィジェットの色を上書きします。

以下に、blendModeプロパティを使用した実例を示します。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.red, Colors.blue],
    ).createShader(bounds);
  },
  blendMode: BlendMode.color,
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

このコードは、”Hello Flutter”というテキストに対して、シェーダーの色を保持しながらテキストの色を上書きするエフェクトを適用します。

shaderCallbackプロパティの詳細

次に、shaderCallbackプロパティについて説明します。shaderCallbackは、シェーダーを作成するための関数を提供します。この関数は、ウィジェットの現在のサイズ（Rect形式）を引数として受け取り、Shaderを返します。通常、LinearGradientやRadialGradientなどのGradientクラスのメソッド、createShaderを使用して、シェーダーを作成します。

以下に、shaderCallbackプロパティを使用した実例を示します。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.topLeft,
      radius: 1.0,
      colors: [Colors.red, Colors.blue],
    ).createShader(bounds);
  },
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

このコードは、”Hello Flutter”というテキストに対して、中心から外側へ赤から青への放射状のグラデーションを適用します。

blendModeやshaderCallbackプロパティを理解し活用することで、アプリケーションに独自の視覚的なエフェクトを追加することが可能となります。

ShaderMaskを用いたエフェクトの作成

グラデーションエフェクトの作成方法

ShaderMaskは、あらゆる種類の視覚的エフェクトを作成するための強力なツールです。ここでは、その中でもよく使われるエフェクトの一つ、グラデーションエフェクトの作成方法について解説します。ShaderMaskを使用してグラデーションエフェクトを作成するためには、shaderCallbackプロパティでLinearGradientまたはRadialGradientを返す必要があります。このshaderCallbackはウィジェットのサイズ（Rect型）を引数とし、Shaderを返す関数です。

以下に、シンプルな線形グラデーションエフェクトを作成するコード例を示します。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.red, Colors.blue],
      stops: [0.0, 1.0],
    ).createShader(bounds);
  },
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

このコードでは、テキストウィジェットに対して上から下にかけて赤から青への線形グラデーションを適用しています。colorsプロパティに配列として色を指定し、stopsプロパティで色が変わる位置を指定します。

画像のエフェクトの作成方法

次に、画像にエフェクトを適用する方法について説明します。画像にエフェクトを追加することで、ユーザー体験を一層豊かにすることができます。

ここでは、画像にグラデーションエフェクトを追加する方法を示します。具体的には、画像の上に重ねる形でグラデーションマスクを適用します。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.transparent, Colors.black],
      stops: [0.5, 1.0],
    ).createShader(bounds);
  },
  blendMode: BlendMode.darken,
  child: Image.network('https://example.com/my-image.jpg'),
)

上記のコードは、ネットワーク上の画像に対して、上から下にかけて透明から黒へのグラデーションを適用します。透明な部分では画像がそのまま表示され、黒い部分では画像が暗くなります。このように、ShaderMaskは画像にさまざまな視覚的効果を追加するための非常に便利なウィジェットです。

以上のように、ShaderMaskの活用によりグラデーションエフェクトや画像にエフェクトを適用する等、視覚的に魅力的なアプリケーションを制作することが可能です。

ShaderMaskの活用例

BlendModeを用いた例

ShaderMaskとBlendModeを組み合わせることで、驚くほど多様な視覚効果を達成することが可能です。特にBlendModeは、色の混合方法を制御することで、非常に豊かなビジュアルエクスペリエンスをユーザーに提供します。

例えば、テキストの背景に少しのアーティスティックな感じを追加したい場合、次のようなコードを書くことができます。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.red, Colors.yellow],
      stops: [0.0, 1.0],
    ).createShader(bounds);
  },
  blendMode: BlendMode.multiply,
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

上記の例では、赤と黄色のグラデーションをテキストに適用し、BlendMode.multiplyを使用して色を混合しています。multiplyは、背景色とソース色を掛け合わせることで新しい色を生成します。この結果、テキストはユニークなグラデーション効果を持つことになります。

LinearGradientを用いた例

次に、LinearGradientを使用したShaderMaskの活用例を見てみましょう。ここでは、画像に線形グラデーションのマスクを適用する方法を示します。線形グラデーションのマスクを適用することで、画像に立体感や深みを追加し、ユーザーに印象的な視覚体験を提供することができます。

具体的なコードは次のようになります。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.black.withOpacity(0.1), Colors.black.withOpacity(0.7)],
      stops: [0.5, 1.0],
    ).createShader(bounds);
  },
  blendMode: BlendMode.darken,
  child: Image.network('https://example.com/my-image.jpg'),
)

このコードでは、ネットワーク上の画像に線形グラデーションのマスクを適用しています。具体的には、上部が透明度0.1の黒、下部が透明度0.7の黒のグラデーションになるように設定しています。この結果、画像の下部は暗く、上部は明るく表示され、画像全体に立体感が生まれます。

このように、ShaderMaskとそのプロパティを適切に活用することで、アプリケーションに鮮やかな視覚的効果を追加し、ユーザーエクスペリエンスを向上させることが可能です。

ShaderMaskの活用例

BlendModeとimage

ShaderMaskとBlendModeを一緒に使用することで、画像に対する興味深いエフェクトを適用することができます。BlendModeは、画像の色とシェーダーの色がどのように混ざるかを制御します。

例えば、次のように画像にモノトーンの効果を適用することができます。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.black, Colors.white],
      stops: [0.0, 1.0],
    ).createShader(bounds);
  },
  blendMode: BlendMode.luminosity,
  child: Image.network('https://example.com/my-image.jpg'),
)

このコードでは、LinearGradientを使用して黒から白へのグラデーションを作成し、BlendMode.luminosityを使用して画像に適用します。luminosityブレンドモードは、ソース色の輝度を保持しながら、背景色の色相と彩度を使用します。その結果、画像にはモノトーンのエフェクトが適用されます。

BlendModeとanimation

BlendModeはまた、アニメーションにも利用できます。例えば、遷移中の画像にエフェクトを適用することが可能です。この場合、AnimationControllerとTweenを使用してシェーダーの色をアニメーション化します。

具体的なコードは以下の通りです。

AnimationController controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

Animation<Color?> animation = ColorTween(
  begin: Colors.red,
  end: Colors.blue,
).animate(controller);

controller.repeat(reverse: true);

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [animation.value!, animation.value!],
    ).createShader(bounds);
  },
  blendMode: BlendMode.color,
  child: Image.network('https://example.com/my-image.jpg'),
);

上記のコードでは、赤から青への色のアニメーションを作成しています。そして、このアニメーションをシェーダーに適用し、BlendMode.colorを使用して画像に適用します。BlendMode.colorは、ソース色の色相と彩度を保持しながら、背景色の輝度を使用します。その結果、画像はアニメーションに従って色が変化します。

このように、ShaderMaskとBlendModeを組み合わせることで、さまざまなビジュアルエフェクトを作成し、静的な画像だけでなくアニメーションにも適用することが可能です。これらのツールを活用することで、アプリケーションはユーザーにとってより鮮やかで視覚的に魅力的なものになります。

Q&A

Q1: ShaderMaskとBlendModeを組み合わせて使うとはどういうことですか？

ShaderMaskとBlendModeを組み合わせて使うというのは、シェーダー（カラーやグラデーションなどのエフェクトを制御するコード）を用いて、ウィジェット（画像やテキストなど）に特殊なエフェクトを適用することです。BlendModeは、ウィジェットとシェーダーが重なる際に、どのように色を混ぜるかを制御します。

Q2: BlendMode.luminosityとBlendMode.colorの違いは何ですか？

BlendMode.luminosityは、ソースの輝度とターゲットの色相と彩度を組み合わせて新しい色を作ります。一方、BlendMode.colorは、ソースの色相と彩度、およびターゲットの輝度を組み合わせて新しい色を作ります。

Q3: LinearGradientを用いたエフェクトの主な用途は何ですか？

LinearGradientは、色のグラデーションを生成するために使用されます。これは、シェーダーとして使用され、ウィジェットにエフェクトを追加するために使われます。主な用途は、画像やテキストに色彩豊かなグラデーションエフェクトを付けることで、アプリケーションのビジュアル体験を強化することです。

まとめ

FlutterのShaderMaskとBlendModeは非常に強力なツールで、これらを組み合わせることでさまざまなビジュアルエフェクトを作成することが可能です。今回は、その活用例として、画像とアニメーションにShaderMaskとBlendModeを用いたエフェクトの作成方法を勉強しました。特に、画像に対するモノトーンエフェクトの作成や色の変化を伴うアニメーションの作成について詳しく見ていきました。

ShaderMaskとLinearGradientを組み合わせて使うことで、画像にグラデーションのようなエフェクトを加えることができました。これにより、画像がさらに引き立つようになりました。また、BlendModeとアニメーションを一緒に使うことで、遷移中の画像にエフェクトを適用することも可能となりました。これらのテクニックを使うことで、アプリケーションのビジュアル面が大幅に向上しました。

これらの知識を活かし、今後はアプリケーションをより鮮やかで視覚的に魅力的なものにすることができると確信しています。今回の学習で、Flutterでのシェーダーの扱い方について理解することができました。

参考

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);

  late Animation<Color?> animation = ColorTween(
    begin: Colors.red,
    end: Colors.blue,
  ).animate(_controller);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ShaderMask(
              shaderCallback: (bounds) => LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.blue, Colors.red],
              ).createShader(bounds),
              child: Text(
                'Hello Flutter',
                style: TextStyle(fontSize: 60, color: Colors.white),
              ),
            ),
            ShaderMask(
              blendMode: BlendMode.color,
              shaderCallback: (bounds) => LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.blue, Colors.red],
              ).createShader(bounds),
              child: Text(
                'Hello Flutter',
                style: TextStyle(fontSize: 60),
              ),
            ),
            ShaderMask(
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.topLeft,
                  radius: 3.0,
                  colors: [Colors.red, Colors.blue],
                ).createShader(bounds);
              },
              child: Text(
                'Hello Flutter',
                style: TextStyle(fontSize: 40, color: Colors.white),
              ),
            ),
            ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.transparent, Colors.black],
                  stops: [0.5, 1.0],
                ).createShader(bounds);
              },
              blendMode: BlendMode.darken,
              child: Image.network(
                  'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
            ),
            ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.red, Colors.yellow],
                  stops: [0.0, 1.0],
                ).createShader(bounds);
              },
              blendMode: BlendMode.multiply,
              child: Text(
                'Hello Flutter',
                style: TextStyle(fontSize: 40, color: Colors.black38),
              ),
            ),
            ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.black.withOpacity(0.1),
                    Colors.black.withOpacity(0.7)
                  ],
                  stops: [0.5, 1.0],
                ).createShader(bounds);
              },
              blendMode: BlendMode.darken,
              child: Image.network(
                  'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
            ),
            ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  colors: [Colors.black, Colors.white],
                  stops: [0.0, 1.0],
                ).createShader(bounds);
              },
              blendMode: BlendMode.luminosity,
              child: Image.network(
                  'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
            ),
            AnimatedBuilder(
                animation: _controller,
                builder: (context, Widget? child) {
                  return ShaderMask(
                    shaderCallback: (Rect bounds) {
                      return LinearGradient(
                        colors: [animation.value!, animation.value!],
                      ).createShader(bounds);
                    },
                    blendMode: BlendMode.color,
                    child: Image.network(
                        'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
                  );
                }),
          ],
        ),
      ),
    );
  }
}

このコードは、ShaderMaskを用いた様々なテキストと画像に対する効果を示すFlutterアプリケーションです。

以下、各部分の解説です。

  1. MyApp: これは全体のアプリケーションを表す部分で、MaterialAppウィジェットを返しています。ここではアプリケーションの全体的な設定、例えばテーマの設定やアプリケーションのホーム画面を設定しています。

  2. MyHomePage: これはホームページの状態を管理するStatefulWidgetです。このウィジェットにはタイトルというパラメータが渡され、新たな_MyHomePageStateインスタンスを生成します。

  3. _MyHomePageState: これはMyHomePageウィジェットの状態を表すクラスで、SingleTickerProviderStateMixinと一緒に使用されます。これにより、アニメーションコントローラーを提供し、カラーアニメーションを制御します。

  4. buildメソッド: ここでは、アプリケーションのホームページのUIを構築しています。最初の部分は、アプリバーを設定する部分です。

  5. ShaderMask: ShaderMaskウィジェットは、その子ウィジェットにシェーダーを適用します。シェーダーは、矩形領域（bounds）を引数にとり、特定のブレンドモードとともに作成されます。このコードでは様々なShaderMaskの例を見ることができます。

    • 最初の二つのShaderMaskはテキストに適用され、一つ目はテキストをブルーからレッドにグラデーションする効果、二つ目はBlendMode.colorを用いてテキストをブルーからレッドに変化させる効果があります。

    • 次の二つのShaderMaskは、特定のURLから取得した画像に対する影響を示しています。特定の範囲で色を透明から黒に変化させるShaderMaskを使用しています。

    • 最後のShaderMaskは、アニメーションを使用して作成された色変化をイメージに適用します。

このコードは、ShaderMaskをどのように使用し、その効果がどのように見えるかを理解する上で、役に立つかと思います。各ウィジェットは異なる効果を示しており、それぞれの効果はブレンドモードやシェーダーによって異なります。