[Flutter]Containerの背景画像(background image)をぼかす(blur)には？

どうも、ちょげ(@chogetarou)です。

Containerの背景画像をぼかす方法を紹介します。

方法

Containerの背景画像をぼかすには、BackdropFilterを使います。

まず、Containerの引数「child」に指定したウェジェットを、BackdropFilterでラップします。

Container(
  child: BackdropFilter(
    child: /*Containerのchildに指定していたもの*/,
  ),
),

次に、BackdropFilterの引数「filter」にImageFilter.blurを指定します。

そして、ImageFilter.blurの引数「sigmaX」に横方向のぶれ具合、引数「sigmaY」に縦方向のぶれ具合を指定します。

Container(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: /*横方向のぶれ*/, sigmaY: /*縦方向のぶれ*/),
    child: child: Text('ボカシ'),
  ),
),

これでContainerの背景画像をぼかすことが出来ます。

また、このままだと他のウェジェットの背景までぼやけるので、仕上げとしてBackdropFilterをClipRectでラップします。

Container(
  child: ClipRect(
    child: BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: /*横方向のぼやけ具合*/,
        sigmaY: /*縦方向のぼやけ具合*/,
      ),
    ),
  ),
),

これで完成です。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2016/01/19/17/41/friends-1149841__340.jpg',
                  ),
                ),
              ),
              width: 250,
              height: 250,
              child: Text('通常'),
            ),
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2016/01/19/17/41/friends-1149841__340.jpg',
                  ),
                ),
              ),
              width: 250,
              height: 250,
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 5,
                    sigmaY: 5,
                  ),
                  child: Text('ぼかし'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }