Flutter实例-毛玻璃效果

最新推荐文章于 2024-03-11 20:23:09 发布

路和远方

最新推荐文章于 2024-03-11 20:23:09 发布

阅读量933

点赞数

分类专栏： Flutter 文章标签：毛玻璃效果

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

版权

Flutter 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

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

效果
在这里插入图片描述