😺

[Flutter] BackdropFilter

2022/12/28に公開約900字

https://youtu.be/dYRs7Q1vfYI
https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

BackdropFilter

Flutterは、画像をサポート(アセットとして、またはネットワーク経由で画像を読み込む など) している

そうした画像に、調整を加えて加えて回転や傾斜、ぼかしなどのエフェクトを加えたい時には、ImageFilterクラスとBackdropFilterウィジェットが有効

BackdropFilter(
 filter: ImageFilter...
 child:
);

BackdropFilterは、ImageFilterとChildをパラメータとしてとり、Childの下にあるwidgetにフィルターを適用する

ぼかし:

BackdropFilter(
 filter: ImageFilter.blur(
  sigmaX: 5,
  sigmaY: 5,
 ), 
 child:
);

もし、背景にフィルターを設定し、そのフィルター上にレンダリング表示しないようにするには、空のContainerContainerをChildとして使うと良い

Stack(
 childlen: [
  DashWidget,
  Positioned(top: 100, bottom: 150, Left: 200, right: 100,
   child: BackdropFilter(
    filter: ImageFilter.blur(
     sigmaX: 5,
     sigmaY: 5,
    ), 
    child:Container(
     color: Colors.black.withOpacity(0),
    ),
   );
  ),
 ],
);

また、Positionedで詳細を設定すると、好きなものをぼかすことができる

Discussion

ログインするとコメントできます