用于 Appbar 的 Flutter BackdropFilter

Question

我如何BackdropFilter在颤振中使用Appbar？当我将它用于Appbar其他Scaffold模糊的小部件时，而不是AppBar

例如：

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

  child: AppBar(
      automaticallyImplyLeading: false,
      // Used for removing back button.
      elevation: 8.0,
      titleSpacing: 0.0,
      backgroundColor: theme.appMainColor,
      title: Stack(
        children: <Widget>[

        ],
      )),
),

Answer 1

1. 使用的flexSpace参数AppBar。
2. 用 a 包裹住，BackDropFilter以ClipRect防止模糊遍布整个屏幕。
3. 确保创建一个Container作为BackDropFilter

以下是您需要添加到您的代码中的最少代码AppBar：

flexibleSpace: ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 7, sigmaY: 7),
    child: Container(
      color: Colors.transparent,
    ),
  ),
),

Answer 2

在网上搜索了一段时间并尝试了不同的小部件组合后，我终于找到了解决方案

    appBar: PreferredSize(
      child: Container(
        child: ClipRRect(
            child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: Container(
                  //   width: MediaQuery.of(context).size.width,
                  //  height: MediaQuery.of(context).padding.top,
                  color: Colors.transparent,
                ))),
      ),
      preferredSize: Size(MediaQuery.of(context).size.width, 22),
    ),

发疯！！