在 ClipOval 中包装 BackdropFilter 可消除模糊效果答案

【问题标题】：Wrapping BackdropFilter in ClipOval removes blur effect在 ClipOval 中包装 BackdropFilter 可消除模糊效果
【发布时间】：2018-06-07 09:34:37
【问题描述】：

我想创建一个圆形小部件，它会模糊其背后的背景，如下所示：

new BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
  child: new Container(
    decoration: new BoxDecoration(shape: BoxShape.circle, color: Colors.lightBlue.withOpacity(0.5)),
    child: Text("Something")
    )
  )

这可行，但在蓝色区域之外的 BoxDecoration 周围的整个矩形显示模糊。所以，我想我会用 ClipOval 把它包起来，像这样：

ClipOval ( child: new BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
  child: new Container(
    decoration: new BoxDecoration(shape: BoxShape.circle, color: Colors.lightBlue.withOpacity(0.5)),
    child: Text("Something")
    )
  ))

不幸的是，这导致没有渲染模糊效果。我错过了什么，还是这是一个颤振的错误？

【问题讨论】：

看起来像一个错误，在问题跟踪器上询问这个问题可能是个好主意

标签： flutter imagefilter flutter-layout

【解决方案1】：

我尝试使用Positioned > ClipRect > BackdropFilter 并看到它有效。

double _sigmaX = 0.0; // from 0-10
double _sigmaY = 0.0; // from 0-10
double _opacity = 0.1; // from 0-1.0
double _width = 350;
double _height = 300;
double _blurWidth = _width / 2;
double _blurHeight = _height / 2;

Stack(
  children: <Widget>[
    Image.asset(
      'assets/images/background.jpg',
      width: _width,
      height: _height,
      fit: BoxFit.cover,
    ),
    FlutterLogo(size: 80, colors: Colors.red),
    Positioned(
      top: 0,
      left: 0,
      width: _blurWidth,
      height: _blurHeight,
      // Note: without ClipRect, the blur region will be expanded to full
      // size of the Image instead of custom size
      child: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
          child: Container(
            color: Colors.black.withOpacity(_opacity),
          ),
        ),
      ),
    )
  ],
);

来源：article on Medium

【讨论】：