😺

[Flutter] BackdropFilter

2022/12/28に公開

Flutter

tech

https://youtu.be/dYRs7Q1vfYI

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で詳細を設定すると、好きなものをぼかすことができる

BackdropFilter

Discussion