毛玻璃

1 article

404 adobe-xd app开发 bbs centos curl dart discourse ditto dns docker fastjson flame flutter flutter-web fork git github hexo homebrew idea jar java json just-for-fun kotlin linux macos map maven microsoft应用商店 minecraft mybatis mybatis-plus mysql nginx node npm null nvm object php pip pr python react spring springboot sql stack-overflow swagger ubuntu unicode vim vue win10 windows wordpress yum 上线准备 书籍资源 关联查询 出生日期 前端 博客排版 后端 国内加速 国际化 图像 字段 字符编码 字符转义 容器 常用操作 常用组件 常识 序列化 开源 快速开发 技术书籍 搜狗 支付宝 效率 教程 数据库 文件编辑 时区 极客用语 毛玻璃 游戏开发 环境部署 生日 空格 缓存 网络配置 访问加速 词库 踩坑 输入法 运维 闲鱼 阿里巴巴 项目信息
images/default1.jpg

Flutter 实现毛玻璃/磨砂效果

Monday, Jun 8, 2020

还记得之前风靡一时的Windows 7的毛玻璃效果吗? 虽然过去了好多年, 但毛玻璃效果一直没有过时👨‍🎓. 本篇文章就来记录下如何使用Flutter实现毛玻璃/磨砂效果. 效果 有图有真相, 先来看下我们要实现的最终效果: 环境&需具备的条件 本篇文章的开发环境: 若想顺利阅读本篇教程, 你需要具备: 计算机已安装Flutter开发环境 掌握Flutter基础 实战开始 创建项目, 清理代码 先来创建一个空项目, 直接用IDE创建或在终端中输入: flutter create my_frosted 删除./test目录. 并替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Frosted Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyFrosted(), ); } } class MyFrosted extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [], ), ); } } 🟢 运行项目, 可以看到白白的一片, 啥也没有:
2 minute read