Flutter 毛玻璃效果案例实现

时间：2020-10-09 20:47:37 阅读：26 评论：0 收藏：0 [点我收藏+]

标签：png 效果图 context -o max 技术 state image nts

前言：

各位同学大家好,因为晚上睡不着就起来给大家写了一个小案例 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）