shiratama anmitsu

【Flutter】サイドメニューのヘッダー画像をぼかす【Dart】

こんにちは、あんみつ(@an_mitsu_32 )です。
FlutterでサイドメニューというとDrawerウィジェットですが、ヘッダーの背景に指定した画像を良い感じにぼかすのに苦戦したので書き記しておきます。


サンプルコード

class HomeDrawer extends StatelessWidget { //➀Drawerクラスを作成
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          SizedBox(
            height: 200, //➁headerの高さ指定
            child: DrawerHeader(
              padding: EdgeInsets.zero, //➂header全体をぼかす
              decoration: BoxDecoration(
                image: DecorationImage( //➃任意の画像を指定
                  image: AssetImage('assets/sample_img.png'),
                  fit: BoxFit.cover),
              ),
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), //➄ぼかし度を指定
                  child: Container(
                    //⑥ここにheader内に表示したいWiget等
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}



コード解説


今回はコードが長くなったので、Drawerウィジェットをクラスにして分けました。
Scaffoldのdrawerプロパティで指定して適用します。

Scaffold(
  drawer: HomeDrawer(),
)


DrawerHeader全体をSizedBoxでラップしています。
SizedBoxのheightでHeaderの高さを指定できます。


paddingをゼロにしてheader全体をぼかしています。
これがないと自動でpaddingが入ってしまいます。


背景にしたい画像をここに記述します。


BackdropFilterのfilterにImageFilter.blurを指定します。
引数のsigmaX、sigmaYはそれぞれ縦横のぼかし具合です。
BackdropFilterをClipRectでラップします。これにより、ぼかす部分がheaderのみになります。


header内に表示したいWiget等はBackdropFilterのchildに記述します。


完成イメージ

サイドメニューのヘッダー画像をぼかすことができました。



おわりに

カスタマイズするとこのようなヘッダーを作ることが出来ます!