Flutter开发实例解析

前　言

第1章 Flutter基础知识　/ 　1

1.1　移动跨端开发技术　/ 　2

　　1.1.1　移动端应用开发的一般流程　/ 　2

　　1.1.2　原生开发与跨端开发　/ 　4

　　1.1.3　移动跨端开发技术的发展历程　/ 　6

　　1.1.4　跨端技术难点　/ 　7

1.2　Flutter技术　/ 　9

　　1.2.1　Flutter技术简介　/ 　9

　　1.2.2　Flutter整体架构　/ 　12

　　1.2.3　Flutter与同类方案对比　/ 　14

1.3　如何安装Flutter SDK　/ 　15

1.4　配置Flutter开发环境　/ 　19

　　1.4.1　使用Android Studio进行Flutter开发　/ 　19

　　1.4.2　使用Visual Studio Code进行Flutter开发　/ 　21

　　1.4.3　使用在线环境进行Flutter开发　/ 　23

1.5　创建**个Flutter应用Hello World　/ 　24

　　1.5.1　如何创建Flutter工程　/ 　24

　　1.5.2　配置Android 模拟器与真机运行　/ 　26

　　1.5.3　配置iOS模拟器与真机运行　/ 　28

第2章 Dart和Flutter核心概念——零基础开发番茄钟计时器　/ 　30

2.1　番茄钟计时器开发要点　/ 　31

2.2　Dart语言快速上手　/ 　31

2.3　什么是Flutter组件化　/ 　32

　　2.3.1　什么是组件化思想　/ 　33

　　2.3.2　无状态组件StatelessWidget　/ 　33

　　2.3.3　有状态组件StatefulWidget　/ 　35

　　2.3.4　组件的生命周期　/ 　35

　　2.3.5　Material和Cupertino组件库　/ 　38

2.4　初识Flutter工程　/ 　39

　　2.4.1　Flutter工程结构特点　/ 　39

　　2.4.2　App组件——应用架构的基石　/ 　40

　　2.4.3　Scaffold 组件——页面的骨架　/ 　41

2.5　开发番茄钟　/ 　42

　　2.5.1　使用Center组件进行居中显示　/ 　43

　　2.5.2　Text文本展示组件　/ 　44

　　2.5.3　添加Timer 定时器　/ 　45

　　2.5.4　为按钮添加单击事件控制番茄钟开始　/ 　46

2.6　番茄钟知识扩展　/ 　48

第3章 自定义视图和动画——开发精美的拟物时钟　/ 　50

3.1　拟物时钟开发要点　/ 　51

　　3.1.1　使用Container 定制组件展示效果　/ 　51

　　3.1.2　使用CustomPaint 创建Flutter自定义视图　/ 　57

　　3.1.3　Flutter动画入门与拟物时钟的开发流程　/ 　59

3.2　基于Canvas和CustomPaint 绘制表盘　/ 　68

　　3.2.1　使用Container 绘制外表盘　/ 　68

　　3.2.2　使用Container 绘制内表盘　/ 　70

　　3.2.3　使用CustomPaint 绘制表盘刻度　/ 　72

3.3　基于CustomPaint 绘制指针　/ 　74

　　3.3.1　使用CustomPaint 绘制时针与分针　/ 　74

　　3.3.2　使用rotate Transform偏转指针　/ 　77

　　3.3.3　使用CustomPaint 绘制秒针　/ 　79

　　3.3.4　使用CustomPaint 绘制中心装饰物　/ 　80

3.4　让时针动起来　/ 　82

　　3.4.1　使用DataTime获取时间信息　/ 　82

　　3.4.2　通过Timer定时器实现时间自动刷新　/ 　84

　　3.4.3　通过RotationTransition实现指针转动动画　/ 　84

3.5　拟物时钟知识拓展　/ 　86

第4章 地图＋传感器——开发轨迹计步器　/ 　88

4.1　轨迹计步器开发要点　/ 　89

　　4.1.1　通过Flutter包管理导入扩展包　/ 　90

　　4.1.2　Flutter Channel原生通信机制介绍　/ 　92

　　4.1.3　Column、Row横纵向布局组件介绍　/ 　97

　　4.1.4　轨迹计步器开发流程　/ 　101

4.2　创建轨迹计步器首页　/ 　101

　　4.2.1　创建轨迹计步器项目结构　/ 　101

　　4.2.2　创建仪表面板组件　/ 　102

4.3　基于Pedometer库实现计步功能　/ 　108

　　4.3.1　Pedometer计步器库介绍　/ 　108

　　4.3.2　通过Flutter Stream监听步数　/ 　109

　　4.3.3　实现轨迹计步器的计步功能　/ 　110

4.4　基于geolocator库实现定位功能　/ 　111

　　4.4.1　geolocator定位库介绍　/ 　112

　　4.4.2　实现轨迹计步器的定位功能　/ 　112

　　4.4.3　保存轨迹计步器的定位轨迹历史　/ 　114

4.5　基于flutter_map库实现地图功能　/ 　115

　　4.5.1　flutter_map地图库介绍　/ 　115

　　4.5.2　使用FlutterMap组件创建地图　/ 　115

　　4.5.3　通过MarkerLayerOptions 展示当前位置　/ 　117

　　4.5.4　通过PolylineLayerOptions 绘制行进轨迹　/ 　118

4.6　轨迹计步器知识拓展　/ 　119

第5章 Socket网络通信——开发属于自己的“微信”聊天工具　/ 　121

5.1　聊天工具开发要点　/ 　122

　　5.1.1　Dart Socket网络通信框架　/ 　122

　　5.1.2　Flutter图片资源管理　/ 　124

　　5.1.3　使用ListView展示长列表数据　/ 　125

　　5.1.4　通过Navigator 进行页面跳转　/ 　127

　　5.1.5　聊天工具开发流程　/ 　130

5.2　创建首页设置页面　/ 　131

　　5.2.1　搭建聊天工具Flutter工程　/ 　131

　　5.2.2　基于NetworkInterface展示本机IP地址　/ 　133

　　5.2.3　使用TextField实现Server设置项　/ 　135

　　5.2.4　使用TextField实现Client设置项　/ 　138

5.3　建立Socket通信　/ 　140

　　5.3.1　创建消息Model并进行JSON序列化　/ 　140

　　5.3.2　创建Socket通信基类BaseSocketCS　/ 　143

　　5.3.3　基于ServerSocket创建Socket服务器　/ 　143

　　5.3.4　基于Socket创建Socket客户端　/ 　145

　　5.3.5　在_MyAppState中接入Socket框架　/ 　146

　　5.3.6　双端Socket通信联调　/ 　152

5.4　建立聊天页面　/ 　154

　　5.4.1　基于ListView 实现消息列表　/ 　155

　　5.4.2　基于Container 实现消息组件　/ 　156

　　5.4.3　基于Navigator 实现页面跳转　/ 　158

　　5.4.4　使用TextField 实现消息输入组件　/ 　159

5.5　使用Image 组件扩展表情包功能　/ 　161

5.6　聊天工具知识拓展　/ 　165

第6章 数据持久化——开发一款支持Markdown的“印象笔记” 　/ 　166

6.1　Markdown 笔记开发要点　/ 　167

　　6.1.1　Flutter下的Markdown展示方式　/ 　167

　　6.1.2　基于flutter_markdown实现Markdown 原生渲染　/ 　168

　　6.1.3　使用shared_preferences存储笔记数据　/ 　170

　　6.1.4　使用InheritedWidget进行状态管理　/ 　171

　　6.1.5　笔记应用开发流程　/ 　174

6.2　基于InheritedWidget 开发状态层　/ 　175

　　6.2.1　创建笔记Model　/ 　176

　　6.2.2　基于基于StatefulWidget创建NoteStore　/ 　177

　　6.2.3　在_NoteStoreState 中实现笔记增删改查　/ 　178

　　6.2.4　基于InheritedWidget实现_NoteStoreScope　/ 　181

　　6.2.5　在NoteStore中完善状态访问接口　/ 　182

6.3　创建笔记应用首页　/ 　183

　　6.3.1　使用didChangeDependencies进行状态关联　/ 　183

　　6.3.2　基于Scaffold实现首页抽屉导航布局　/ 　184

6.4　创建笔记编辑页　/ 　186

　　6.4.1　实现_PageEditorState搭建主要布局　/ 　187

　　6.4.2　实现getAppBar编辑页工具栏　/ 　188

　　6.4.3　运行编辑页调试功能　/ 　190

　　6.4.4　使用TextField 实现元信息编辑页　/ 　191

6.5　创建笔记预览页　/ 　194

6.6　创建编辑页工具栏　/ 　195

6.7　Markdown 笔记应用知识扩展　/ 　198

第7章 SQLite数据库——开发一款“奇妙清单”Todo 应用　/ 　200

7.1　Todo 应用开发要点　/ 　201

　　7.1.1　使用sqflite 进行SQLite 数据库开发　/ 　201

　　7.1.2　使用Provider进行Flutter复杂状态管理　/ 　204

　　7.1.3　Todo 应用的业务流程　/ 　208

7.2　基于sqflite 实现SQLite 数据层　/ 　210

　　7.2.1　封装项目Model　/ 　210

　　7.2.2　封装待办事项Model　/ 　211

　　7.2.3　sqflite 数据库初始化　/ 　213

　　7.2.4　实现项目数据库操作类ProjectManager　/ 　214

　　7.2.5　实现待办事项操作类TodoManager　/ 　215

7.3　基于Provider实现状态层　/ 　216

　　7.3.1　实现待办事项状态类TodoState　/ 　216

　　7.3.2　实现项目状态类ProjectState　/ 　217

　　7.3.3　使用MultiProvider对外提供状态　/ 　219

7.4　创建Todo 应用首页　/ 　219

　　7.4.1　使用Consumer 实现项目列表　/ 　220

　　7.4.2　创建待办事项列表项组件　/ 　222

　　7.4.3　使用Consumer2 实现待办事项列表　/ 　225

7.5　创建Todo 应用项目编辑页　/ 　227

　　7.5.1　实现项目编辑页整体Scaffold 布局　/ 　227

　　7.5.2　使用showDatePicker编辑创建和截止时间　/ 　229

　　7.5.3　访问ProjectState 实现项目数据保存　/ 　231

7.6　创建Todo 应用待办事项编辑页　/ 　232

　　7.6.1　实现待办事项编辑页整体Scaffold 布局　/ 　232

　　7.6.2　通过自定义对话框实现项目选择　/ 　235

　　7.6.3　访问TodoState 实现待办事项数据保存　/ 　236

7.7　Todo 应用知识扩展　/ 　238

第8章 Http+WebView——开发“技术头条”让技术先人一步　/ 　239

8.1　技术头条开发要点　/ 　240

　　8.1.1　Flutter http网络库介绍　/ 　240

　　8.1.2　GitHub API介绍　/ 　241

　　8.1.3　使用json_annotation实现高效序列化　/ 　242

　　8.1.4　Flutter集成WebView实现网页浏览　/ 　244

　　8.1.5　技术头条的业务流程　/ 　245

8.2　基于http 库实现网络层　/ 　246

　　8.2.1　基于json_annotation创建Model 类　/ 　247

　　8.2.2　基于http 库实现GitHub 网络访问类　/ 　252

　　8.2.3　基于Service 模式搭建网络层　/ 　254

8.3　创建首页活动Feed 流　/ 　257

　　8.3.1　基于CustomScrollView搭建首页Feed 流布局　/ 　257

　　8.3.2　通过SliverPersistentHeader实现吸顶搜索组件　/ 　258

　　8.3.3　通过SliverGrid实现九宫格导航　/ 　261

　　8.3.4　通过SliverList实现Feed 流内容展示　/ 　264

　　8.3.5　接收ScrollNotification事件实现加载更多内容　/ 　268

8.4　创建GitHub 公共活动Feed 流　/ 　270

　　8.4.1　基于ListView公共活动Feed 流布局　/ 　270

　　8.4.2　通过listPublicEvents和ScrollNotification 加载数据　/ 　272

8.5　通过xpath 爬虫实现GitHub Trending 页　/ 　273

　　8.5.1　通过xpath 解析GitHub Trending 网页　/ 　274

　　8.5.2　通过ListView对GitHub Trending 进行展示　/ 　276

　　8.5.3　在createGrid中完成路由跳转逻辑　/ 　277

8.6　基于webview_flutter实现WebView页面　/ 　278

8.7　技术头条应用知识扩展　/ 　279