各位同学大家好,因为晚上睡不着 就起来给大家写了一个小案例 demo（Flutter 毛玻璃效果案例实现），希望能帮助到各位同学学习，那么废话不多说我们正式开始
需要安装flutter的开发环境：大家可以去看看之前的教程： 1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718 2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3
首先我们用可约束性盒子组件 来装载一个 image组件显示底部图片
//约束性盒子 ConstrainedBox( constraints: const BoxConstraints.expand(), child: Image.network("http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg"), ),然后我们用 可裁切矩形组件ClipRect 来实现毛玻璃效果 我们在 ClipRect 组件里面嵌套 BackdropFilter组件来处理背景过滤器的效果
//可裁切的矩形 child: ClipRect( //背景过滤器 child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0), child: Opacity( opacity: 0.2, child: Container( width: 500.0, height: 700.0, decoration: BoxDecoration( color: Colors.grey.shade200 ), child: Center( child: Text("天河区扛把子",style:TextStyle(fontSize: 40,color: Colors.black),), ), ), ), ), ),然后我们在 BackdropFilter 组件中设置filter 属性的sigma 值 x轴 和y 轴分别为5.0 这个值具体根据UI效果来，然后我们在BackdropFilter 组件中嵌套 Opacity 设置毛玻璃透明度效果 opacity: 0.2, 此值为小数具体看UI效果来 我们代码用的是0.2，然后我们在 Opacity中嵌套一个 Container设置起显示的区域宽高 并设置 decoration 属性 设置颜色为
decoration: BoxDecoration( color: Colors.grey.shade200 ),这样我们就实现了毛玻璃的效果 上面显示的文字我们在 Container 盒子组件中在添加一个Center 居中显示组件嵌套一个text组件即可，到此flutter简单的毛玻璃效果我们就讲完了。 毛玻璃显示widget 完整代码：
import 'package:flutter/material.dart'; import 'dart:ui'; /** * * 创建人：xuqing * 创建时间:2020年10月8日23:36:35 * 类说明：毛玻璃图片 * */ class FrostedGlassDemo extends StatelessWidget { FrostedGlassDemo({Key key}) : super(key: key); @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: Stack( children: <Widget>[ //约束性盒子 ConstrainedBox( constraints: const BoxConstraints.expand(), child: Image.network("http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg"), ), Center( //可裁切的矩形 child: ClipRect( //背景过滤器 child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0), child: Opacity( opacity: 0.2, child: Container( width: 500.0, height: 700.0, decoration: BoxDecoration( color: Colors.grey.shade200 ), /* child: Center( child: Text("天河区扛把子",style:TextStyle(fontSize: 40,color: Colors.black),), ),*/ ), ), ), ), ) ], ), ); } }flutter中这种常见的毛玻璃的效果还是比较容易实现，flutter sdk中提供了很多我们需要使用到的属性我们只需要组合使用 能得到我们一般想要的效果。这个毛玻璃效果，实现也比较简单，代码量不大，最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦，也可以加我个人QQ/微信（1693891473）
码云 : https://gitee.com/qiuyu123/frostedglassdemo
