颤动模糊叠加

Question

我要创建一个对话框，而不是使它后面的小部件变暗的通常的实质方法，而是使它们模糊。所以本质上我想知道是否有一种方法不仅可以模糊图像，而且可以模糊整个应用程序（或其一部分）

Answer 1

您可以使用BackdropFilter使图像实际模糊，并使用以下代码在其上放置白色叠加层。_value是可以使用的滑块值。对于前。10.0

@override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    SystemChrome.setEnabledSystemUIOverlays([]);
    // TODO: implement build
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      body: new Stack(children: <Widget>[
        new PageView.builder(
          itemBuilder: (context, pos) {
            return new Stack(
               children: <Widget>[
                 new FadeInImage(
                   fit: BoxFit.cover,
                   placeholder: new CachedNetworkImageProvider(
                       widget.CatimgList[pos].thumb_img),
                   image: new CachedNetworkImageProvider(
                       widget.CatimgList[pos].image_large),
                 ),
                new BackdropFilter(
                   filter: new ImageFilter.blur(sigmaX: _value, sigmaY: _value),
                   child: new Container(
                     decoration: new BoxDecoration(
                         color: Colors.white.withOpacity(_value)),
                   ),
                 )
               ],
            );
      );
)

Answer 2

对于您的情况，我们可以按顺序组合这些小部件：Stack > [Widget1ToBlur, Widget2ToBlur,... , Container > 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;

Stack(
  children: <Widget>[
    Image.asset(
      'assets/images/${images[_imageIndex]}',
      width: _width,
      height: _height,
      fit: BoxFit.cover,
    ),
    FlutterLogo(size: 80, colors: Colors.red),
    Container(
      width: _width,
      height: _height,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
        child: Container(
          color: Colors.black.withOpacity(_opacity),
        ),
      ),
    )
  ],
);

本文将为您提供有关 BackdropFilter 的信息。