视频地址:

https://www.bilibili.com/video/av39709290/?p=7

博客地址:

https://jspang.com/post/flutterDemo.html#toc-65a

创建demo04

flutter从1.0 开始就鼓励大家使用类的不用再写前面的 New关键字了

例如原来new MyAp();现在直接 MyApp();就可以了

新建 frosted_glass_demo.dart

stack是层叠组件把我们的图片毛玻璃都重叠在一起

我们使用的网络图片地址:

https://wx3.sinaimg.cn/mw690/006OBeunly1g1cndu1l5dj30zk0nmgnu.jpg
 

最终代码:

import 'package:flutter/material.dart';
import 'frosted_glass_demo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo of wjw',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: FrostedGlassDemo(),
),
);
}
}

main.dart

import 'package:flutter/material.dart';
import 'dart:ui'; class FrostedGlassDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ConstrainedBox(//约束盒子widget 添加额外的约束条件child上
constraints: const BoxConstraints.expand(),//条件就是随着里面的东西进行扩展
child: Image.network('https://wx3.sinaimg.cn/mw690/006OBeunly1g1cndu1l5dj30zk0nmgnu.jpg'),
),
Center(
child: ClipRect(//可裁切的矩形
child: BackdropFilter(//背景过滤器
filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0),//图片过滤器
child: Opacity(//透明度
opacity: 0.5,
child: Container(
width: 500.0,
height: 700.0,
decoration: BoxDecoration(color: Colors.grey.shade200),//盒子修饰器
child:Center(
child: Text(
'WJW HAHA',
style: Theme.of(context).textTheme.display3,
),
)
),
),
),
),
)
],
),
);
}
}

frosted_glass_demo.dart

20个Flutter实例视频教程-第07节: 毛玻璃效果制作的更多相关文章

  1. 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1

    20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...

  2. 20个Flutter实例视频教程-第13节: 展开闭合案例

    20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...

  3. 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1

    第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...

  4. 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1

    视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...

  5. 20个Flutter实例视频教程-第02节: 底部导航栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...

  6. 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...

  7. 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2

    博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...

  8. 20个Flutter实例视频教程-第08节: 保持页面状态

    博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...

  9. 20个Flutter实例视频教程-第09节: 保持页面状态-2

    视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...

随机推荐

  1. idea常用的快捷命令

    main方法: psvm System.out.println(): sout

  2. caffe搭建--caffe在invidia+cpu 酷睿2Q9300 + ubuntu16.04.2上面的安装和编译过程

    本文原创,转载请注明出处. ------------------------------------------------分割线-------------------------------- 概要 ...

  3. 启动app-inspector报Internal Server Error

    前言 应用工具app-inspector可以协助定位IOS版App的控件元素,然鹅启动时报Internal Server Error! 解决办法 一.找到XCTestWD项目 目录: /usr/loc ...

  4. Jenkins + Maven + TestNG参数化调用测试用例

      希望实现的场景:Jenkins中的Job可针对不同浏览器,不同环境,运行不同的测试用例集,但测试用例只保持一份. 具体实现的思路:在运行Jenkins Job时传入参数,运行 mvn test 命 ...

  5. 【BZOJ1043】[HAOI2008]下落的圆盘 几何

    [BZOJ1043][HAOI2008]下落的圆盘 Description 有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周长.看下面这副图, 所有的红色线条的总长度即为所求.  ...

  6. CMake命令笔记

    project 为整个工程设置名称.版本和启用语言 project(<PROJECT-NAME> [LANGUAGES] [<language-name>...])projec ...

  7. thinkphp权限管理Rbac实例

    首先,先建立Rbac那五张表(用户表,角色表,节点表,权限表,角色-用户表),后面四张可以在thinkphp中Rbac类里直接复制. 第二步,根据需求往那五张表里插入数据,注意:节点表里的节点名称一定 ...

  8. 周期性计划(一个cron守护进程):

    周期性计划(一个cron守护进程): root@ubuntu:/etc# ps -ef | grep cron root 903 1 0 16:25 ? 00:00:00 /usr/sbin/cron ...

  9. php高级技巧总结

    通过对<深入理解PHP:高级技巧.面向对象与核心技术>这本书的学习,总结出常用的php高级技巧,也方便自己以后查阅;我认为该书是php高级教程的葵花宝典,哈哈.里面的内容很实用,尤其是在项 ...

  10. shared SDK 微信开放平台遇到的问题

    shared sdk是用于集成到app中,方便快速社交化分享的组件,其使用方法比较简单,参考官网的快速集成步骤就能搞定.稍微麻烦一点的就是需要到各个开放平台去注册你的APP. 在各个开放平台注册好之后 ...