【Flutter】シェーダーを使って画像をマスクする方法【ShaderMask】

はじめに

Flutterで複雑な形に画像をマスクしたい時に使える ShaderMask を紹介します。

成果物のイメージ

方法

ShaderMask を使用します。マスクしたい画像をShaderMaskのchildに指定するのですが、シェーダーとして与えてやる必要があります。

https://api.flutter.dev/flutter/widgets/ShaderMask-class.html

ShaderMask(
    shaderCallback: (bounds) => shader.data!,
    blendMode: BlendMode.srcIn,
    child: maskImage,
);

画像をシェーダーに変換する

画像をシェーダー化するには ImageShader クラスを使用します。

ImageShader(
    image,
    TileMode.decal,
    TileMode.decal,
);

サイズ指定がある場合

サイズ指定がある場合は、リサイズしてからShaderを作成します。ここが結構複雑です。

final completer = Completer<ImageInfo>();

ResizeImage(imageProvider, width: width, height: height)
    .resolve(ImageConfiguration(
      size: Size(width.toDouble(), height.toDouble()),
    ))
    .addListener(
        ImageStreamListener((info, _) => completer.complete(info)));

final image = await completer.future;

ブレンドする

要件にあったマスクとなるよう、BlendModeを調整します。

ShaderMask(
    shaderCallback: (bounds) => shader.data!,
    blendMode: BlendMode.srcIn,
    child: maskImage,
);

上記のような黒いマスクであれば BlendMode.srcIn がちょうどいいかと思います。

おわりに

Flutterで複雑な形に画像をマスクしたい時に使える ShaderMask を紹介しました。

---

参考

https://chari-ngo.hatenablog.com/entry/2020/04/10/234214