BackdropFilterを使わずに画像にblurをかける

"flutter Image blur"で検索してもBackdropFilterの記事しか出ないのでカッとなって書いた。画像にボケと透明度を同時に適用したいとか、BackdropFilterだとボケの感じが思ってたのとなんか違うなという時にどうぞ。

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Image.network('...',  // dst
    color: Colors.white.withOpacity(0.5),  // src
    colorBlendMode: BlendMode.lighten, // 重ねる色に合わせていい感じになるやつを選んでください
  ),
)

私の場合は、

• 画像にボケをかけたい -> BackdropFilterを使いたまえ
• Widgetのグループを半透明にしたい -> Opacityで包みたまえ

の合わせ技で、リストに入っているというのも効いたのか、ボケと半透明が適用された画像が表示されないことがあった。

ここでの問題点は、BackdropFilter自体が結構重い処理*1なのに加えて、さらにOpacityもまたそれなりに重い*2ということで、これを解決したければ、Opacityのページにも書いてあるようにImageのプロパティを使って透過度を適用するのが軽くてよいらしい。私はPorter-DuffのBlendModeをつかって適用＋ImageFilteredのblurで解決したが、もっと簡単な方法もあるかもしれない。

*1: https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html のサンプルコードの下あたりを参照。

*2: https://api.flutter.dev/flutter/widgets/Opacity-class.html のサンプルコードの下あたりを参照。offscreen bufferを使うことになって重いし、画面の再描画処理も走るので古いGPUの端末では遅くなりそうみたいなことが書いてある。