Flutterで画像のぼかし効果を実装する方法

2024-02-08 20:48 Flutter 画像処理 ぼかし効果

まず、画像のぼかし効果を実現するために、BackdropFilterウィジェットを使用します。BackdropFilterウィジェットは、子ウィジェットに対して背景のぼかしを適用することができます。具体的な手順は以下の通りです。

  1. 画像を表示するためのImageウィジェットを作成します。例えば、以下のようにします。
Image(image: AssetImage('画像のパス'))
  1. BackdropFilterウィジェットを使用して、ぼかし効果を適用するためのフィルターを作成します。以下のようにします。
BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Image(image: AssetImage('画像のパス')),
)

上記の例では、sigmaXおよびsigmaYパラメーターを使用してぼかしの強度を調整しています。値が大きいほどぼかしが強くなります。

  1. もし、ぼかし効果を特定の範囲に制限したい場合は、ClipRectウィジェットを使用して制限することができます。以下のようにします。
ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Image(image: AssetImage('画像のパス')),
  ),
)

これにより、ぼかし効果がClipRectウィジェットの範囲内に制限されます。

以上の手順により、Flutterで画像のぼかし効果を実装することができます。ぼかしの強度や範囲は、sigmaXおよびsigmaYパラメーターを調整することでカスタマイズできます。

この記事では、BackdropFilterウィジェットを使用した画像のぼかし効果の実装方法を説明しました。これを参考にして、自分のFlutterアプリケーションにぼかし効果を追加してみてください。