首页 文章

模糊背景颤振的部分

提问于
浏览 次
0

我试图在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"),
          ),
        ),
      ),
    );
  }

以下是相反的事情：

enter image description here

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

dart flutter

1 回答

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

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

    回复于

相关问题