Flutter 项目开发指导 从基础入门到精通使用目录

Flutter 从入门 到精通系列文章

本文章为 Flutter 开发中的经验积累分享、教程分享、开发笔记分享目录，持续维护中。

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

---

Flutter 脚手架 快速开发模版

如果你迷茫 不妨来此 每日分享 先积累着再说

2020年12月5日开始

• 每天早晨 7：00~ 9：00 录制视频
• 每天夜晚 22：00~24：59 整理源码
• 第二天 晚 20：00 左右发布

---

• 2020 -12-05 第一天 ​​Flutter应用开发从0到1基础架构搭建效果预览​​
• 2020 -12-06 第二天 ​​Flutter项目创建、Android Studio的基本断点调试 应用图标更换、应用名称修改​​
• 2020 -12-07 第三天 ​​Flutter从0到1构建应用启动页面、闪屏页面 600行字幕 带大家轻松玩转-正在发布​​
• 2020 -12-08 第四天 ​​Flutter从0到1 权限申请 ​​
• 2020 -12-09 第五天 ​​Flutter从0到1 权限申请 封装- iOS 权限申请适配​​

… …

• 2021 -01-22 第三十八天 ​​Flutter 一个水平渐变颜色的动画进度条​​ – ​​【源码】​​
• 2021 -01-23 第三十九天 ​​Flutter 列表数据分组展示、分级展示 直接复制使用​​
• 2021 -01-23 第四十天 ​​Flutter 一个图片滑动浏览器 滑动到最后一张退出浏览​​​​【源码】​​
• 2021 -01-23 第四十一天 ​​Flutter 图片浏览器滑动到最后一张 拖动打开下一个页面​​​​【源码】​​

---

2021.04.06

• ​​Flutter Slidable 列表侧滑菜单 列表侧滑删除​​ 【​​源码github​​】 【​​视频​​】

2021.03.30

• ​​Flutter ImageFilter 高斯模糊效果 BackdropFilter 实现过滤效果​​

2021.03.26

• ​​Flutter 弧度与角度之间的换算​​

2021.01.16

• ​​Flutter 雷达扫描效果、Flutter旋转扫描​​

2021.01.07

• ​​Flutter Listener 监听手指的滑动方向、监听手指上下滑动​​
• ​​Flutter轮播图效果、Flutter轮播图Demo​​

2020.12.28

• ​​Flutter InteractiveViewer 支持平移和缩放子Widget​​

2020.12.27

• ​​Flutter设置允许HTTP访问​​

2020.12.25

• ​​Flutter 随机颜色 颜色处理工具类​​

2020.12.21

• ​​Flutter Duration详细概述​​

2020.12.17

• ​​Flutter视频播放、Flutter VideoPlayer 视频播放组件精要​​

2020.12.01

• ​​Flutter 气泡背景效果 仿苹果桌面运动的气泡​​

2020.11.30

• ​​Flutter 雪花飘落的效果-深夜创作​​
• ​​Flutter 动态饼状图 让你的APP中无聊的统计图动起来 挻舒适的感觉瞬间提升一个档次 -深夜创作​​
• ​​Flutter 绘图 Paint strokeCap 延伸类型 strokeJoin 拐角类型 图文分析​​

2020.11.23

• ​​周末也需要学习 分享一个 Flutter 波浪波动效果的登录页面的背景 Flutter ClipPath实现的波动​​

2020.11.18

• Flutter ClipPath 自定义CustomClipper 玩转不一样的背景图案
  
• Flutter AnimatedSwitcher 实现的滑动切换数字动画效果
  
• Flutter AlertDialog弹框的基本使用、Flutter showDialog方法使用概述
  
• Flutter 一个优美的用户体验的登录页面 抖动提示 文本提示
  
• Flutter 底部向上弹出的动画按钮
  
• Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果
  
• Flutter CupertinoSliverRefreshControl 苹果风格的刷新效果
  

2020.11.11

• ​​Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果​​
• ​​Flutter CupertinoSliverRefreshControl 苹果风格的刷新效果​​
• ​​Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理​​
• ​​Flutter TextButton 详细使用配置​​

2020.11.05

• ​​Flutter OpenContainer 容器转换动画​​

2020.11.04

• ​​Flutter Animations showModal 模态动画方式打开新的页面​​

2020.11.03

• ​​Flutter PageView 实现的自动轮播图效果 Timer实现的自动轮播效果​​
• ​​Flutter NestedScrollView 滑动折叠头部下拉刷新效果​​

2020.11.1

• ​​Flutter 底部弹框 showModalBottomSheet 使用Demo​​

2020.10.31

• ​​Flutter BottomNavigationBar 三分钟实现一个常用APP首页底部导航菜单栏​​

2020.10.29

• ​​Flutter TabBar 标签栏背景颜色、点击水波纹颜色配置​​

2020.10.27

• ​​Flutter 调试技巧 Flutter Inspector​​
• ​​Android Studio 快速定位代码 提高你的一倍开发效率​​

2020.10.23

• ​​Flutter ListView 局部刷新数据、ListView点赞收藏​​
• ​​Flutter Provider 异步通信、Provider状态管理​​

2020.10.22

• ​​Flutter BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探​​

2020.10.21

• ​​Flutter StreamBuilder 实现的一个倒计时功能​​

2020.10.20

• ​​Flutter StreamBuilder 异步更新数据​​

2020.10.19

• ​​Flutter StreamController 异步通信、Streamr 流异步通信​​

2020.10.18

• ​​Flutter ValueNotifier 异步通信、ValueListenableBuilder异步更新数据​​
• ​​Flutter核心基础07 文件下载​​
• ​​Flutter核心基础网络框架 Dio 文件上传​​
• ​​Flutter核心基础网络框架 Dio Post 请求概述​​
• ​​Flutter网络编程04 JSON 数据的解析​​
• ​​Flutter网络编程03 Dio Get请求传参数的巧妙使用​​

2020.10.15

• ​​Flutter Icons 与 CupertinoIcons 的不一样的体验​​
• ​​Flutter ClipOval 圆形裁剪实现的图形图片​​

2020.10.09

• Flutter GridView 用来实现九宫格布局功能 ​​文章分析​​ | ​​视频讲解​​

2020.10.08

• Flutter CustomScrollView实现的一个经典滑动折叠头部图片的效果
  
• Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果
  
• Flutter CustomScrollView的巧妙使用
  

2020.10.03

• ​​Flutter组件精讲【79】复选框CheckBox 1​​

2020.10.01

• ​​Flutter组件精讲【66】Flutter Column 使你的Widget垂直方向一个一个排开​​
• ​​Flutter组件精讲【67】聊一聊Flutter应用开发中布局Column的大小设置​​
• ​​Flutter组件精讲【68】Column-第三讲​​
• ​​Flutter组件精讲【69】Column-权重布局​​
• ​​Flutter组件精讲【70】Image图片组件的使用概述 第一弹​​
• ​​Flutter组件精讲【71】Image图片组件的使用概述 第二弹​​
• ​​Flutter组件精讲【72】Image图片加载本地图片 第一弹​​
• ​​Flutter组件精讲【73】Image图片加载本地图片 1 第二弹​​

2020.09.27

• ​​Flutter MaterialButton组件详细概述​​
• ​​Flutter组件精讲【55】Contrainer 坏形渐变​​
• ​​Flutter组件精讲【54】Contrainer 线性渐变​​
• ​​Flutter个性化的Contrainer 边框样式【Flutter组件精讲53】​​
• ​​Flutter组件精讲【52】Contrainer 边框样式​​
• ​​Flutter Contrainer的巧妙使用【Flutter组件精讲51】​​

2020.09.25

• ​​Flutter AnimatedSwitcher 动画切换组件的基本使用​​

2020.09.19

• ​​Flutter中富文件标签的解决方案​​

2020.09.12 开发笔记

• iOS中加载Flutter中的图片
  
• Flutter组件精讲【01】 MateriaApp使用概述
  
• Flutter组件精讲【02】MaterialApp组件的基本使用
  
• Flutter组件精讲【03】 MateriaApp组件路由routes配制
  
• Flutter组件精讲【04】 MateriaApp配置默认启动页面
  
• Flutter组件精讲【05】 MateriaApp之页面的跳转
  
• Flutter组件精讲【06】MaterialApp 组件配置 404 页面-01
  
• Flutter组件精讲【07】MaterialApp 组件配置 404 页面-02
  
• Flutter组件精讲【30】flutter Text文本组件 a
  
• [Flutter组件精讲【31】文本组件Text的基本使用 2
  
• Flutter组件精讲【42】TextField 边框样式2
  
• Flutter组件精讲【43】玩转文本输入框 提示文本配置
  
• Flutter组件精讲【44】文本输入框多样式的提示
  
• Flutter组件精讲【45】文本输入框计算文本的提示巧操作
  
• Flutter组件精讲【46】TextField 文本控制器预设置内容
  
• Flutter组件精讲【47】TextField 文本控制器输入监听
  

2020.09.02

• Flutter自定义相机
  
• Flutter抖动动画、颤抖动画、Flutter文字抖动效果
  
• Dart核心语言基础const关键字与final关键字的区别
  
• Dart核心基础List概述
  
• Flutter State生命周期 Flutter Widget生命周期 Flutter 应用程序生命周期
  

2020.08.02

• Flutter中ListView加载图片数据的优化查看详情
  
• Flutter异步加载FutureBuilder解决重绘方案查看详情
  
• Flutter异步编程async与await的基本使用查看详情
  
• Flutter延时任务、Flutter通过Future与Timer实现延时任务查看详情
  
• Flutter中async与await异步编程原理分析查看详情
  
• Dart语言基础Map、List、Set操作合辑查看详情
  
• Flutter图像绘制原理深入分析查看详情
  
• Flutter中Widget 、Element、RenderObject角色深入分析 查看详情
  
• Flutter中AnimatedOpacity 实现透明度渐变动画效果 查看详情
  
• Flutter透明度渐变动画Opacity实现透明度渐变动画效果查看详情
  
• Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果 查看详情
  

2020.07.19

• Flutter闪屏过渡动画，闪光占位动画​​查看详情​​
• Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果 ​​查看详情​​
• Flutter的AnimatedContainer实现容器样式的动画切换 ​​查看详情​​

2020.07.15

• Flutter加载Html并实现与JS 的双向调用 ​​查看详情​​

2020.07.05

• flutter上拉抽屉效果 ​​查看详情​​

2020.06.22

• Flutter搜索框SearchBa​​查看详情​​
• Flutter中为图片设置波纹点击效果 ​​查看详情​​
• Flutter图片添加水印功能 ​​查看详情​​
• Flutter网络dio框架公共请求参数、请求header使用总结 ​​查看详情​​
• flutter网络dio框架get请求使用总结 ​​查看详情​​
• flutter向上动画弹出菜单效果 ​​查看详情​​

---

2020.05.27

• flutter的Flexible和 Expanded的区别 ​​查看详情​​

2020.05.23

• Flutter圆形动画弹出菜单​​查看详情​​

2020.05.09

• Flutter中焦点FocusNode使用分析Flutter输入框焦点事件的捕捉与监听 ​​查看详情​​

2020.04.19

• Flutter底部导航栏BottomNavigationBar页面状态保活解决方案 ​​查看详情​​

2020.04.06

• 浅谈Flutter的状态State ​​查看详情​​

2020.03.15

• Flutter新手引导蒙版（浮层）​​查看详情​​

2020.03.05

• flutter网络请求框架dio基本使用查看详情
  
• flutter网络dio框架get请求使用总结查看详情
  

2020.03.01

• flutter开发仿抖音首页面上下滑动切换播放视频效果​​查看详情​​

2020.02.15

• flutter跨平台开发之App升级方案​​查看详情​​

2020.01.07

NestScrollView系列文章

• flutter NestedScrollView 下拉刷新的解决方案一​​查看详情​​

极光推送 系列文章

• flutter应用开发中集成极光推送（flutter极光推送第一篇）​​查看详情​​

TextField 系列文章

• TextField的基本使用以及TextField常用属性精讲​​《点击查看详情》​​
• TextField 焦点获取控制篇​​《点击查看详情》​​
• TextField 输入文本样式 TextStyle 篇​​《点击查看详情》​​
• TextField 输入文本 textAlign 对齐分析篇​​《点击查看详情》​​
• TextField 输入文本 decoration 配置边框样式以及提示文本分析篇​​《点击查看详情》​​
• TextField TextEditingController 分析篇​​《点击查看详情》​​

2019.12.19

• Flutter 中的国际化之多语言环境 ​​查看详情​​

2019.12.17

• Flutter友盟插件开发使用​​查看详情​​

2019 .7.22

• 4.2.3 flutter widget 嵌入 android WebView ​​查看详情​​
• 4.2.4 flutter widget 嵌入 ios webview ​​查看详情​​

2019 .7.17

• 4.1.1 Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信 ​​查看详情​​
• 4.1.2 Flutter通过MethodChannel实现Flutter 与Android iOS 的双向通信 ​​查看详情​​

2019.7.16

• 4.1.1 flutter widget 嵌入android TextView ​​查看详情​​
• 4.1.2 flutter widget 嵌入ios UiLabel ​​查看详情​​

2019.7.15 凌晨

• 最新更新 4.1.1 flutter 主动调用android 原生方法 ​​查看详情​​
• 最新更新 4.1.2 flutter 主动调用ios 原生方法 ​​查看详情​​

2019年07月12日 傍晚

• 最新更新 ​​1.4.7 flutter 设置圆角矩形边框 (点击查看详情)​​
• 最新更新 ​​1.4.6 flutter Toast消息提示框 (点击查看详情)​​

【本案例开发flutter 使用到的开发工具为 android Studio ，Xcode】

1 第一阶段 UI 基础篇

---

1.1 第一阶段 之 【环境配制相关】

• 1.1.1 flutter 从配制开发环境再到开发第一个应用 查看详情
  
• 1.1.2 flutter 使用Android Studio 创建第一个应用 查看详情
  
• 1.1.3 flutter 开发应用第一个页面 查看详情
  
• 1.1.4 flutter 之 Dart语言 基础 查看详情
  

1.2 第一阶段 之 Flutter 【ui 基础 -1】

• 1.2.1 flutter 主题 Flutter MaterialApp 简述 查看详情
  
• 1.2.2 flutter 主布局 Flutter Scaffold 查看详情
  
• 1.2.3 flutter AppBar 简述 查看详情
  
• 1.2.4 flutter Container 容器 查看详情
  
• 1.2.4.1 flutter Container 宽高度限定分析 查看详情
  
• 1.2.5 StatefulWidget和StatelessWidget 查看详情
  
• 1.2.6 flutter Text 文本显示 查看详情
  
• 1.2.7 flutter Button 按钮 查看详情
  
• 1.2.8 flutter TextField 文本输入框 查看详情
  
• 1.2.9 flutter 开关Switch与复选框Checkbox 查看详情
  
• 1.2.10 flutter Radio 单选框 查看详情
  
• 1.2.11 flutter 水平和垂直布局详解 查看详情
  
• 1.2.12 flutter Stack 帧布局，层叠堆放 查看详情
  
• 1.2.13 flutter Form 表单
  
• 1.2.14 一个登录页面 查看详情
  

1.3 第一阶段 之 Flutter 【ui 基础 -2】

• 1.3.1 flutter Image 图片加载 查看详情
  
• 1.3.2 flutter ScrollView 滑动 查看详情
  
• 1.3.3 flutter PageView 分页切换
  

• flutter PageView左右滑动切换视图 ​​查看详情​​
• flutter PageView上下滑动切换视图 ​​查看详情​​
• flutter PageView 下拉刷新 与 上拉加载更多​​查看详情​​

• 1.3.3 flutter CustomScrollView 自定义滑动效果 码云查看
  
• 1.3.4 flutter listView 查看详情
  
• 1.3.5 flutter listView 下拉刷新与上拉加载更多 查看详情
  
• 1.3.6 flutter GridView 查看详情
  
• 1.3.7 flutter progress 进度条查看详情
  
• 1.3.8 flutter tab选项卡
  

• appbar 中的选项卡 ​​查看详情​​
• appbar 下的选项卡 ​​查看详情​​

• 1.3.9 flutter AndroidView 加载android 原生view 查看详情
  
• 1.3.10 flutter UiKitView 加载ios 原生view 查看详情
  

1.4 第一阶段 之 Flutter 【ui 基础 -3】

• 1.4.1 PickView 时间选择器 ​​查看详情​​
• 1.4.2 PickView 城市选择器
• 1.4.3 弹框 dialog ​​查看详情​​
• 1.4.3-1 Flutter自定义使用Dialog并更新Dialog中的内容 ​​查看详情​​
• 1.4.4 flutter 实现轮播图效果 ​​查看详情​​
• 1.4.5 导航栏菜单

• flutter BottomNavigationBar 实现底部导航栏​​查看详情​​
• flutter TabBar 底部导航栏 ​​查看详情​​
• flutter 自定义 BottomAppBar 实现不规则底部导航栏 ​​查看详情​​
• flutter 自定义 绘制布局 实现不规则底部动画导航栏 ​​查看详情​​

• 1.4.6 flutter Toast消息提示框 ​​查看详情​​
• 1.4.7 flutter 设置圆角矩形边框 ​​查看详情​​

---

2 第二阶段 功能基础篇

2.1 flutter Gesture 手势处理

• 2.1.1 flutter widget 添加单击、双击、长按、按下与抬起事件监听 ​​查看详情​​
• 2.1.2 flutter InkWell 设置水波纹点击效果详述 ​​查看详情​​
• 2.1.3 Flutter中为图片设置波纹点击效果 ​​查看详情​​

2.2 flutter 常用工具类

• 2.2.1 flutter 日志输出LogUtil 使用 ​​查看详情​​
• 2.2.2 flutter 倒计时 TimerUtil 使用 ​​查看详情​​
• 2.2.3 flutter 将毫秒转为日期,时间格式 ​​查看详情​​

2.2 flutter 数据存储

2.3 flutter 页面路由跳转

2.4 flutter 网络请求

2.5 flutter oss 阿里云文件上传

---

3 第三阶段 动画功能篇

3.1 flutter 平移动画

• 3.1.1 flutter SlideTransition实现平移动画 ​​查看详情​​

3.2 flutter 旋转动画

• 3.2.1 flutter RotationTransition实现旋转动画 ​​查看详情​​

3.3 flutter 缩放动画

• 3.3.1 flutter ScaleTransition实现缩放动画 ​​查看详情​​
• 3.3.2 flutter PositionedTransition 实现缩放动画 ​​查看详情​​

3.4 flutter 透明渐变动画

• 3.4.1 flutter FadeTransition实现透明度渐变动画 ​​查看详情​​

---

4 第四阶段 高级功能篇

4.1 flutter 与android ios 原生互调

• 4.1.1 Flutter通过 BasicMessageChannel 实现 Flutter 与 Android iOS 的双向通信 查看详情
  
• 4.1.2 Flutter通过 MethodChannel 实现 Flutter 与Android iOS 的双向通信 查看详情
  
• 4.1.3 flutter 调用android 相机
  
• 4.1.4 flutter 调用ios 相机
  
• 4.1.5 flutter 调用android 扫一扫
  
• 4.1.6 flutter 调用ios 扫一扫
  
• 4.1.7 调用android mp3格式录音
  
• 4.1.8 flutter 调用ios mp3格式录音
  

4.2 flutter 中嵌入 android ios 原生view

• 4.2.1 flutter 嵌入android TextView ​​查看详情​​
• 4.2.2 flutter 嵌入ios UILabel ​​查看详情​​
• 4.2.3 flutter widget 嵌入 android WebView ​​查看详情​​
• 4.2.4 flutter widget 嵌入 ios webview ​​查看详情​​

4.3 android ios 原生中 嵌入使用flutter widget

4.4 flutter 插件开发

• 4.4.1 flutter 调用原生android ios 自定义相机插件
• 4.4.2 flutter 调用原生android ios 扫一扫插件
• 4.4.3 flutter 调用原生 webview 插件 ​​查看详情​​
• 4.4.4 flutter 调用原生 录音 mp3格式 插件