Flutter之BackdropFilter组件

/**
 * 高斯模糊,会将下面所有的内容都给模糊掉,
 * const BackdropFilter({
    Key key,
    @required this.filter, //设置模糊程度
    Widget child,
    })
 */
//ImageFilter需要导入import 'dart:ui';

body: Container(
            width: 500,
            height: 500,
            color: Colors.green,
            child: Stack(
              children: [
                Container(
                  width: 400,
                  height: 400,
                  color: Colors.red,
                ),
                Image.network(
                  "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3454574876,1377139334&fm=27&gp=0.jpg",
                  width: 300,
                  height: 300,
                ),
                BackdropFilter(
                  //sigmaX和sigmaY分别设置了x和y方向的模糊程度,数值越大模糊度越高
                  filter: ImageFilter.blur(sigmaX: 11, sigmaY: 11),
                  child: Container(
                      width: 300,
                      height: 300,
                      child: Center(
                        child: Image.network(
                          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3454574876,1377139334&fm=27&gp=0.jpg",
                          width: 80,
                          height: 80,
                        ),
                      )
                  ),
                )
              ],
            ),
          )

你可能感兴趣的:(Flutter之BackdropFilter组件)