Question

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

redirect_url =  "http://localhost:3000/sign_in" + "?return_to" + "#{request.original_url}"
redirect_to redirect_url

这样可行，但在蓝色区域之外的BoxDecoration周围显示完整矩形的模糊。所以，我以为我会把它包装在ClipOval中来剪掉它，就像这样：

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")
    )
  )

不幸的是，这会导致无法呈现模糊效果。我错过了什么，或者这是一个扑动的错误？

Answer 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

在ClipOval中包装BackdropFilter会删除模糊效果

1 个答案: