Flutter实例-毛玻璃效果

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

效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值