Flutter 毛玻璃效果案例实现

前言：

各位同学大家好,因为晚上睡不着 就起来给大家写了一个小案例 demo（Flutter 毛玻璃效果案例实现），希望能帮助到各位同学学习，那么废话不多说我们正式开始

准备工作 ：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图 ：

QQ截图20201009000247.png

具体实现：

首先我们用可约束性盒子组件 来装载一个 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，小弟在这里谢过啦

项目地址：

码云 : https://gitee.com/qiuyu123/frostedglassdemo