Flutter实例-毛玻璃效果

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/shuzhuchengfu/article/details/101779376

Flutter实例-毛玻璃效果

/// 毛玻璃效果
class FrostedGlass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("毛玻璃效果"),),
      body: Center(
        child: Stack(
          children: <Widget>[
            Image.asset("images/1.jpg"),
            //裁切长方形
            Positioned(child: ClipRect(
              child: BackdropFilter(
                //图片模糊过滤，横向竖向都设置5.0
                filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
                //透明控件
                child: Opacity(
                  opacity: 0.2,
                  child: Container(
                    width: 200,
                    height: 200,
                    //盒子装饰器，进行装饰，设置颜色为灰色
                    decoration: BoxDecoration(color: Colors.grey.shade200),
                  ),
                ),
              ),
            ),
              top: 10,
              left: 50,
            )
          ],
        ),
      ),
    );
  }
}

效果