Dart 背景抖动的模糊部分

我试图模糊只有一部分我的背景在颤振，但我的整个背景变得模糊。我在屏幕中央有一个大小框，我希望大小框的背景部分被模糊掉

这是我的密码：

return new Container(
      decoration: new BoxDecoration(
        image: new DecorationImage(
            image: new ExactAssetImage("images/barber.jpeg"),
            fit: BoxFit.cover
        )
      ),
      child: new SizedBox(
        height: 200.0,
        width: 200.0,
        child: new BackdropFilter(
          filter: new ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: new Center(
            child: new Text("Hi"),
          ),
        ),
      ),
    );
  }

以下是实际情况：

---

我甚至不知道为什么我的文本是红色的，有黄色的下划线。我只希望大小框的区域变得模糊。

您的大小框现在基本上将被忽略，因为您不告诉flifter在其父对象中渲染它的位置。因此，您需要将其包裹在中心（或其他对齐方式）

您还需要使用ClipRect来包装SizedBox，以便BackdropFilter效果被剪裁到该大小

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

/// This is just so that you can copy/paste this and have it run.
void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
                image: new NetworkImage(
                    "https://images.pexels.com/photos/668196/pexels-photo-668196.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
                fit: BoxFit.cover)),
        child: new Center(
          child: new ClipRect(
            child: new SizedBox(
              height: 200.0,
              width: 200.0,
              child: new BackdropFilter(
                filter: new ui.ImageFilter.blur(
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ),
                child: new Center(
                  child: new Text("Hi"),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

将'dart:ui'导入为ui；
进口“包装：颤振/材料.省道”；
///这只是为了让您可以复制/粘贴并运行它。
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
State createState（）=>MyAppState（）；
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振演示”，
家：新集装箱(
装饰：新盒子装饰(
图片：新装饰图片(
图像：新网络图像(
"https://images.pexels.com/photos/668196/pexels-photo-668196.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
安装：BoxFit.盖），
孩子：新中心(
孩子：新克利普雷克特(
孩子：新尺寸的盒子(
高度：200.0，
宽度：200.0，
孩子：新的反滴过滤器(
过滤器：新建ui.ImageFilter.blur(
sigmaX:5.0，
西格梅：5.0，
),
孩子：新中心(
儿童：新文本（“Hi”），
),
),
),
),
),
),
);
}
}

---

这是非常相切的，但至于为什么文本是黄色和下划线，我相信这是默认的，如果你没有指定一个主题，但我可能是错误的

要删除黄线，需要将文本包装在Material小部件中

BackdropFilter(
  filter: ImageFilter.blur(
      sigmaX: 4.0,
      sigmaY: 4.0,
      ),
        child: new Center(
          child: Center(
            child: Material (
                child: Text("  "),
              color: Colors.blue.withOpacity(0.0),
            )
          ),
        ),
      ),

---

这个问题答案的可能重复应该可以解决您的问题。对于带下划线的部分，请确保您有一个主题的实例，或者您可以简单地将您的文本环绕在最初在此处回答的材料小部件周围。谢谢你的解决方案，我想知道为什么BackdropFilter模糊了我的整个容器。通过将clipRect包装到容器中，现在一切都正常工作了！令人惊叹的。。谢谢