Question

我试图在Flutter中仅模糊我背景的某一部分但我的整个背景变得模糊。我的屏幕中央有一个SizedBox，我希望SizedBox布局的背景部分模糊不清。

这是我的代码：

var newBoats = updatedBoats.Where(u => !oldBoats.Any(o => o.GetId() == u.GetId()));

以下是发生的事情：

我甚至不确定为什么我的文字是红色的并且有一个黄色的下划线。我想要的是sizeBox的区域只能模糊。

Answer 1

您的SizedBox现在基本上会被忽略，因为您不会告诉颤动在其父级中的位置。因此，您需要将其包裹在中心（或其他对齐方式）。

您还需要使用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"),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这是非常切合实的，但是为什么文本是黄色的并加下划线，我相信如果你没有指定主题，这是默认的，但我可能错了。

Answer 2

要删除黄线，您需要将文本包装在Material Widget中

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

模糊背景颤振的部分

2 个答案: