《Flutter技术入门与实战》——导读

简介: 本书由资深架构师撰写,从实战角度讲解Flutter,从基础组件到综合案例,从工具使用到插件开发,包含大量精选案例和详细实操步骤,还有配套视频课程可帮助读者快速入门。
dca30ed0888b2b937f21ed325e0acaa2182427e4

内容简介


本书由资深架构师撰写,从实战角度讲解Flutter,从基础组件到综合案例,从工具使用到插件开发,包含大量精选案例和详细实操步骤,还有配套视频课程可帮助读者快速入门。

Flutter——谷歌完全免费且开源的移动UI框架,可以快速在iOSAndroid上构建高质量的原生用户界面。

第1章介绍Flutter的基本概念,并搭建第一个Flutter程序,来感受一下Flutter之美。

第2章介绍几个重要知识点,如入口程序、Material Design、Flutter主题、无状态组件和有状态组件、使用包资源、Http请求。

第3章简单介绍Dart语言。Dart语言是Flutter SDK指定的语言,我们很有必要补充一下它的基础知识,包括语法特性、基本语句、面向对象等。

第4章介绍常用组件。Flutter里有一个非常重要的核心理念:一切皆为组件,本章主要讲解开发中用得最频繁的组件,如容器组件、图片组件、文本组件、图标组件和表单组件等。

第5章介绍Material Design风格的组件,Material Design风格是一种非常有质感的设计风格,并提供一些默认的交互动画。本章将分类介绍这些组件。

第6章介绍Cupertino风格的组件,这是一类iOS风格的组件,如CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。

第7章介绍页面布局的基础知识和技巧,如基础布局处理、宽高尺寸处理、列表及表格布局等,最后通过一个综合布局示例来演示如何编写复杂的页面。

第8章介绍如何处理手势,如轻击、拖动和缩放等。Flutter中提供GestureDetector进行手势检测,并为手势检测提供了相应的监听。

第9章介绍如何加载、处理、展示资源和图片,如添加资源和图片、自定义字体等。

第10章介绍路由及导航是如何处理的,包括页面的渲染以及数据传递。

第11章介绍组件装饰和视觉效果的处理,如Opacity(透明度处理)、DecoratedBox(装饰盒子)、RotatedBox(旋转盒子)、Clip(剪裁处理)和CustomPainter(自定义画板)。

第12章介绍动画效果的制作,包含两个动画组件的使用:用AnimatedOpacity实现渐变效果、用Hero实现页面切换动画。

第13章介绍Flutter插件开发的入门知识。Flutter插件可以和原生程序打交道,比如调用蓝牙、启用WIFI、打开手电筒,等等。

第14章介绍开发工具及使用技巧,介绍几款常用的IDE工具,从代码的编写、辅助功能、程序调试、性能分析等多方面讲解工具及使用技巧。

第15章介绍测试与发布应用,包括:测试应用、发布Android版和iOS版App。

第16章通过一个综合案例介绍如何使用Flutter实现即时通讯App的界面。



作者简介


亢少军

    智云视频会议系统联合创始人,从事流媒体技术研发工作多年,对于Android、iOS等开发技术有比较深入的研究和应用,作为主要程序员开发了多个应用项目,涉及医疗、交通、银行等领域。


前言

现在,主流的移动开发平台是Android和iOS,每个平台上的开发技术不太一样,针对每个平台开发应用需要特定的人员,但这样一来开发效率低下,因而需要进行跨平台开发。跨平台技术从最开始的Hybrid混合开发技术,到React Native的桥接技术,一直在演进。

Hybrid开发主要依赖于WebView。但WebView是一个重量级的控件,很容易产生内存问题,而且复杂的UI在WebView上显示的性能不好。React Native技术抛开了WebView,利用JavaScript Core来做桥接,将JavaScript调用转为Native调用。React Native最终会生成对应的自定义原生控件。这种策略将框架本身和App开发者绑在系统的控件上,不仅框架本身需要处理大量平台相关的逻辑,随着系统版本变化和API的变化,开发者可能也需要处理不同平台的差异,甚至有些特性只能在部分平台上实现,这样使得跨平台特性大打折扣。

Flutter是最新的跨平台开发技术,可以横跨Android、iOS、MacOS、Windows、Linux等多个系统。Flutter采用了更为彻底的跨平台方案,即自己实现了一套UI框架,然后直接在GPU上渲染UI页面。

笔者最早接触的跨平台技术是Adobe Air技术,写一套Action Script代码可以运行在PC、Android及iOS三大平台上。目前,笔者与朋友开发视频会议产品,需要最大化地减少前端的开发及维护工作量,所以,我们先后考察过Cordova、React Native及Flutter等技术。我们觉得Flutter方案更加先进,效率更高,后来就尝试用Flutter开发了全球第一个开源的WebRTC插件(可在GitHub上搜索Flutter WebRTC)。

写作本书的目的是想传播Flutter知识(因为Flutter确实优秀),想为Flutter社区做点贡献的同时也为我们的产品打下坚实的技术基础。通过写作本书,笔者查阅了大量的资料,使得知识体系扩大了不少,收获良多。

 

阅读建议

本书是一本基础入门加实战的书籍,既有基础知识,又有丰富示例,包括详细的操作步骤,实操性强。由于Flutter大量使用组件,所以本书对组件的讲解很详细,包括基本概念、属性及代码示例。每个组件都配有小例子,力求精简,还提供了配套网站提供完整代码,复制完整代码就可以立即看到效果。这样会给读者信心,在轻松掌握基础知识的同时快速进入实战。

如果你正在使用类似React Native等跨平台的技术,那么学习Flutter相对轻松很多。使用Flutter构建应用时,需要Android和iOS知识,因为Flutter依赖移动操作系统提供众多功能和配置。Flutter是一种为移动设备构建用户界面的新方式,但它有一个插件机制可与Android和iOS进行数据及任务通信。本书有一章专门讲解Flutter的插件开发技术,可以作为进一步学习的起点。

Flutter引用了大量Web开发的知识,比如FlexBox布局方式、盒模型等,这些都引用了CSS的一些思想。所以从UI界面的实现角度来说,只需要熟悉Dart语言就能轻松上手Flutter。本书专门有一章介绍Dart语言的基础知识。

建议读者在一开始先把第1~3章基础理论通读一遍。到第4章时实际操作并运行每个例子,这样就能开发Flutter最简单的界面了。

第5章和第6章通读即可。第7章介绍的构建页面布局都是开发中常用的布局方法,建议读者仔细阅读、实际操作并运行每个例子。尤其是最后的布局综合例子,按步骤都走一遍,就能理解布局的思路。

第8~12章涵盖Flutter的高级用法,在开发中也经常使用。可以根据实际项目开发和学习的需要阅读。第13章介绍Flutter插件开发。这需要具备原生开发的知识,比如Java、Objective-C 等相关知识。如果读者不需要开发插件可以略过。第14~16章实操性很强,读者只要根据书中的步骤仔细操作,就能快速掌握。

关于随书代码

本书所列代码力求完整,但由于篇幅所限,代码没有全放在书里。完整代码在以下网址:

http://www.flutter100.net

https://github.com/kangshaojun

致谢

首先感谢机械工业出版社吴怡编辑的耐心指点,以及推动了本书的出版。

感谢朋友段伟伟工程师,江湖人称“鱼老大”,国内骨灰级WebRTC开发者、视频会议产品合作者。在这里感谢鱼老大的技术分享及帮助。

感谢陈波及陈志红两位好友。在本书交稿压力最大的时侯,从内容安排及语言润色方面,都提供了一些非常有用的建议。还感谢高文翠老师对本书大纲的指导。

最后还要感谢我的家人。感谢我的母亲及妻子,在我写作过程中承担了全部的家务并照顾小孩儿,使我可以全身心地投入写作工作。在写作那段时间,正好家里阁楼装修,感谢我的父亲,他亲自管理装修工程,帮我节省了很多时间和精力。我爱你们,和你们在一起是幸运的事情!

 

亢少军

2018年12月




目录


前言

第1章 开启Flutter之旅  1

1.1 Flutter的特点与核心概念  1

1.1.1 一切皆为组件  2

1.1.2 组件嵌套  2

1.1.3 构建Widget  3

1.1.4 处理用户交互  4

1.1.5 什么是状态  4

1.1.6 分层的框架  5

1.2 开发环境搭建  5

1.2.1 Windows环境搭建  5

1.2.2 MacOS环境搭建  11

1.3 第一个Flutter程序  17

第2章 Flutter基础知识  23

2.1 入口程序  23

2.2 Material Design设计风格  24

2.3 Flutter主题  24

2.3.1 创建应用主题  24

2.3.2 局部主题  26

2.3.3 使用主题  27

2.4 无状态组件和有状态组件  28

2.5 使用包资源  31

2.6 Http请求  34

第3章 Dart语言简述  40

3.1 Dart重要概念与常用开发库  40

3.2 变量与基本数据类型  43

3.3 函数  46

3.4 运算符  47

3.5 流程控制语句  51

3.6 异常处理  54

3.7 面向对象  55

3.7.1 实例化成员变量  55

3.7.2 构造函数  56

3.7.3 读取和写入对象  57

3.7.4 重载操作  58

3.7.5 继承类  59

3.7.6 抽象类  60

3.7.7 枚举类型  62

3.7.8 Mixins  62

3.8 泛型  63

3.9 库的使用  64

3.10 异步支持  65

3.11 元数据  65

3.12 注释  67

第4章 常用组件  68

4.1 容器组件  68

4.2 图片组件  70

4.3 文本组件  72

4.4 图标及按钮组件  74

4.4.1 图标组件  74

4.4.2 图标按钮组件  75

4.4.3 凸起按钮组件  77

4.5 列表组件  78

4.5.1 基础列表组件  78

4.5.2 水平列表组件  80

4.5.3 长列表组件  82

4.5.4 网格列表组件  83

4.6 表单组件  84

第5章 Material Design风格组件  88

5.1 App结构和导航组件  89

5.1.1 MaterialApp(应用组件)  89

5.1.2 Scaffold(脚手架组件)  94

5.1.3 AppBar(应用按钮组件)  95

5.1.4 BottomNavigationBar(底部

导航条组件)  97

5.1.5 TabBar(水平选项卡及视图

组件)  99

5.1.6 Drawer(抽屉组件)  104

5.2 按钮和提示组件  107

5.2.1 FloatingActionButton(悬停

按钮组件)  107

5.2.2 FlatButton(扁平按钮组件)  109

5.2.3 PopupMenuButton(弹出菜单

组件)  110

5.2.4 SimpleDialog(简单对话框

组件)  112

5.2.5 AlertDialog(提示对话框

组件)  113

5.2.6 SnackBar(轻量提示组件)  115

5.3 其他组件  116

5.3.1 TextField(文本框组件)  117

5.3.2 Card(卡片组件)  119

第6章 Cupertino风格组件  122

6.1 CupertinoActivityIndicator

组件  122

6.2 CupertinoAlertDialog对话框

组件  123

6.3 CupertinoButton按钮组件  124

6.4 Cupertino导航组件集  125

第7章 页面布局  132

7.1 基础布局处理  133

7.1.1 Container(容器布局)  133

7.1.2 Center(居中布局)  137

7.1.3 Padding(填充布局)  138

7.1.4 Align(对齐布局)  140

7.1.5 Row(水平布局)  143

7.1.6 Column(垂直布局)  144

7.1.7 FittedBox(缩放布局)  146

7.1.8 Stack/Alignment  149

7.1.9 Stack/Positioned  151

7.1.10 IndexedStack  153

7.1.11 OverflowBox溢出父容器

显示  155

7.2 宽高尺寸处理  156

7.2.1 SizedBox(设置具体尺寸)  156

7.2.2 ConstrainedBox(限定最大

最小宽高布局)  158

7.2.3 LimitedBox(限定最大宽

高布局)  159

7.2.4 AspectRatio(调整宽高比)  160

7.2.5 FractionallySizedBox(百分比

布局)  162

7.3 列表及表格布局  163

7.3.1 ListView  164

7.3.2 GridView  166

7.3.3 Table  167

7.4 其他布局处理  169

7.4.1 Transform(矩阵转换)  169

7.4.2 Baseline(基准线布局)  171

7.4.3 Offstage(控制是否显示

组件)  172

7.4.4 Wrap(按宽高自动换行

布局)  174

7.5 布局综合示例  177

7.5.1 布局分析  177

7.5.2 准备素材  179

7.5.3 编写代码  180

第8章 手势  185

8.1 用GestureDetector进行手势

检测  185

8.2 用Dismissible实现滑动删除  187

第9章 资源和图片  190

9.1 添加资源和图片  190

9.1.1 指定assets  190

9.1.2 加载assets  191

9.1.3 平台assets  193

9.2 自定义字体  195

第10章 路由及导航  198

10.1 页面跳转基本使用  198

10.2 页面跳转发送数据  201

10.3 页面跳转返回数据  204

第11章 组件装饰和视觉效果  208

11.1 Opacity(透明度处理)  208

11.2 DecoratedBox(装饰盒子)  210

11.3 RotatedBox(旋转盒子)  217

11.4 Clip(剪裁处理)  217

11.5 案例—自定义画板  222

第12章 动画  241

12.1 用AnimatedOpacity实现渐变

效果  241

12.2 用Hero实现页面切换动画  243

第13章 Flutter插件开发  246

13.1 新建插件  246

13.2 运行插件  249

13.3 示例代码分析  250

第14章 开发工具及使用技巧  259

14.1 IDE集成开发环境  259

14.1.1 Android Studio / IntelliJ  259

14.1.2 Visual Studio Code  267

14.2 Flutter SDK  274

14.3 使用热重载  275

14.4 格式化代码  276

14.5 Flutter组件检查器  278

第15章 测试与发布应用  281

15.1 测试应用  281

15.1.1 简介  281

15.1.2 单元测试  282

15.1.3 Widget测试  283

15.1.4 集成测试  284

15.2 发布Android版App  286

15.2.1 检查App Manifest  287

15.2.2 查看构建配置  287

15.2.3 添加启动图标  288

15.2.4 App签名  290

15.2.5 构建发布版APK并安装在

设备上  291

15.3 发布iOS版App  291

15.3.1 准备工作  291

15.3.2 在iTunes Connect上注册

应用程序  292

15.3.3 注册一个Bundle ID  292

15.3.4 在iTunes Connect上创建

应用程序记录  293

15.3.5 查看Xcode项目设置  294

15.3.6 添加应用程序图标  295

15.3.7 准备发布版本  297

15.3.8 将应用发布到App Store  300

第16章 综合案例—即时通讯App

界面实现  301

16.1 项目介绍  301

16.2 项目搭建  302

16.2.1 新建项目  302

16.2.2 添加源码目录及文件  305

16.3 入口程序  306

16.4 加载页面  307

16.5 应用页面  309

16.6 搜索页面  316

16.6.1 布局拆分  316

16.6.2 请求获取焦点  316

16.6.3 自定义TouchCallBack

组件  316

16.6.4 返回文本组件  318

16.6.5 组装实现搜索页面  318

16.7 聊天页面  321

16.7.1 准备聊天消息数据  321

16.7.2 聊天消息列表项实现  322

16.7.3 聊天消息列表实现  325

16.8 好友页面  325

16.8.1 准备好友列表数据  326

16.8.2 好友列表项实现  327

16.8.3 好友列表头实现  329

16.8.4 ContactSiderList类  329

16.8.5 Contacts类  332

16.9 我的页面  333

16.9.1 通用列表项实现  334

16.9.2 Personal类  335

目录
相关文章
|
7天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
7天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
7天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
7天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
7天前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
7天前
|
Dart 前端开发 安全
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
【4月更文挑战第30天】本文探讨了Flutter中线程管理和并发编程的关键性,强调其对应用性能和用户体验的影响。Dart语言提供了`async`、`await`、`Stream`和`Future`等原生异步支持。Flutter采用事件驱动的单线程模型,通过`Isolate`实现线程隔离。实践中,可利用`async/await`、`StreamBuilder`和`Isolate`处理异步任务,同时注意线程安全和性能调优。参考文献包括Dart异步编程、Flutter线程模型和DevTools文档。
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
|
7天前
|
Dart 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
【4月更文挑战第30天】Flutter Profiler是用于性能优化的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者识别性能瓶颈,如CPU过度使用、渲染延迟、内存泄漏和网络效率低。通过实时监控和分析,开发者能优化代码、减少内存占用、改善渲染速度和网络请求,从而提升应用性能和用户体验。定期使用并结合实际场景与其它工具进行综合分析,是实现最佳实践的关键。
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
|
7天前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
7天前
|
Dart 前端开发 Java
【Flutter前端技术开发专栏】Flutter中的内存泄漏检测与解决
【4月更文挑战第30天】本文探讨了Flutter应用中的内存泄漏检测与解决方法。内存泄漏影响性能和用户体验,常见原因包括全局变量、不恰当的闭包使用等。开发者可借助`observatory`工具或`dart_inspector`插件监测内存使用。解决内存泄漏的策略包括避免长期持有的全局变量、正确管理闭包、及时清理资源、妥善处理Stream和RxDart订阅、正确 disposal 动画和控制器,以及管理原生插件资源。通过这些方法,开发者能有效防止内存泄漏,优化应用性能。
【Flutter前端技术开发专栏】Flutter中的内存泄漏检测与解决
|
7天前
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局(避免复杂嵌套,使用`const`构造函数)、管理内存、优化动画、实现懒加载和按需加载,以及利用Flutter的性能工具(如DevTools)都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例,展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试