dart - 背景 flutter 的模糊部分

Question

我试图在 Flutter 中仅模糊我背景的特定部分，但我的整个背景都变得模糊了。我的屏幕中央有一个 SizedBox，我希望 SizedBox 所在位置的背景部分被模糊掉。

这是我的代码:

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"),
          ),
        ),
      ),
    );
  }

下面是发生的事情:

我什至不确定为什么我的文本是红色的并且带有黄色下划线。我想要的是仅模糊 sizedBox 的区域。

Answer 1

你的 SizedBox 现在基本上会被忽略，因为你没有告诉 flutter 在它的父级中在哪里渲染它。所以你需要将它包裹在一个中心(或其他对齐方式)。

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

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