码迷,mamicode.com
首页 > 其他好文 > 详细

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)

项目地址:

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

QQ 交流群:

技术图片

Flutter 毛玻璃效果案例实现

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

原文地址:https://www.cnblogs.com/xq9527/p/13783417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!