作者：张益珲
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
用Flutter极速构建原生应用试读：
前言
随着移动端开发技术越来越成熟，近些年，工程师们除了致力于解决工程需求外，更多地将精力放在如何更大程度地提高移动端应用的开发效率。开发移动端应用有一个非常令人困扰的问题是平台不统一，对于主流的iOS与Android平台，开发其应用使用不同的编程语言和不同的开发框架使得开发周期和成本都提高。Flutter框架就是为处理应用跨平台问题提供的一种解决方案。
在Flutter之前，已经有许多问世的跨平台应用开发框架，例如PhoneGap框架与React Native框架，其中有些是基于Web与原生的交互实现跨平台，有些是基于JavaScript引擎渲染原生页面实现跨平台，Flutter则是跨过原生层，直接向GPU提供视图数据进行页面的渲染，相比其他框架，Flutter能表现出更好的性能。
对于开发者Flutter框架表现得非常友好，首先其拥有快速开发的特点，Flutter的热重载机制可以更快地进行UI的构建和测试，添加功能和修改错误都可以瞬间得到反馈，这是纯原生开发无法企及的。Flutter框架中提供了丰富的UI组件，包括标签、按钮、滚动视图与列表视图等。使用这些组件可以快速地进行页面的构建，并且可以在各个平台上保持一致的体验。在代码编写方面，Flutter选择Dart作为应用开发语言，其语法简洁，拥有许多现代化编程语言的特性。同时，Flutter提供了与原生API交互的能力，基本可以实现实际应用的所有需求。本书结构
本书分为10个章节对Flutter应用开发进行全面的讲解。
第1章为入门章节，主要介绍Flutter框架的历史、发展过程以及应用场景，并且在这一章中将帮助读者配置开发Flutter应用程序必备的开发环境。
第2章和第3章将介绍Flutter应用开发的语言基础，主要介绍Dart语言的语法，帮助读者更快地掌握开发Flutter必备的语言技能，使读者可以无障碍地进行后续内容的学习。
第4章和第5章着重介绍Flutter框架中UI组件的应用，第4章介绍基础组件的应用，第5章介绍高级组件的应用。一款完整的应用程序是由多个页面组合而成的，页面又是由各种组件组合而成的，Flutter框架中默认提供了非常丰富的组件供开发者使用，并且可以通过插件的方式扩展使用其他第三方组件，如果依然无法满足需求，那么可以通过自定义组件的方式定制需要使用的组件。通过这两章的学习，读者可以自主开发简单的独立页面。
第6章将介绍Flutter中动画与手势的相关技术，Flutter是一个优秀的UI跨平台框架，动画是UI开发中非常重要的一部分，炫酷的动画可以给用户带来眼前一亮的快感。通过Flutter的手势系统可以定制出各种复杂情境下的交互逻辑。通过本章的学习，读者将会对UI开发更加得心应手。
第7章介绍Flutter中的网络与数据相关技术，网络是现代应用程序必备的功能，网络为应用程序提供必要的内容数据，通过使用插件在Flutter中可以方便地对网络数据进行解析，将解析的数据渲染到页面上，即可完成一个完整Flutter页面的开发。
第8章和第9章将安排两个完整的Flutter应用程序供读者练习，通过实战练习综合应用前面所学习的知识，帮助读者更快、更牢固地掌握所学到的内容。第8章将通过一个新闻客户端项目帮助读者更好地掌握网络请求、数据解析、页面渲染等方面的知识。第9章将安排一个小游戏，通过游戏的开发深入理解Flutter动画框架的应用。通过这两章的练习，读者将拥有独立开发一款完整Flutter应用的能力。
第10章介绍了如何将Flutter快速应用于iOS、Android项目和Web应用程序。视频教学与源码下载
本书提供了完整的源代码供读者在学习过程中进行参考，并提供了一套Dart语言极速入门的视频课程，读者在学习本书的同时可以参考这些资料。
扫描以下二维码可以下载本书教学视频：
扫描以下二维码可以下载本书源代码：
如果你在下载过程中遇到问题，请发送邮件至booksaga@126.com，邮件主题是“用Flutter极速构建原生应用”。致谢
感谢你选择本书作为学习Flutter应用开发的入门教程，衷心希望本书可以带给你预期的收获，帮助你掌握新技术，更具行业竞争力。本书能够出版还要感谢清华大学出版社的王金柱编辑，在本书写作的过程中，王金柱编辑提供了非常多有价值的建议与资料，并且对本书中的内容进行了严格的校对，没有他的付出，本书无法顺利地到达读者的手上。
目前，Flutter框架依然在飞速地完善和更新中，本书是作者学习和开发经验的总结，限于水平和时间，本书肯定存在理解不当的地方，欢迎读者朋友和业界专家批评指正。张益珲2019年8月18日第1章 Flutter开发环境搭建
Flutter是谷歌公司开发的一款移动端UI框架，它可以很好地用于开发Android和iOS移动端应用，并且可以给用户带来高质量的视觉和交互体验。Flutter中的组件采用响应式框架构建，这种现代的编程思路也会给开发者带来非常顺畅的编程体验。
本章首先完成Flutter学习的准备工作，主要介绍Flutter的历史、Flutter的应用场景以及Flutter开发环境的搭建。
通过本章，你将学习到：
• Flutter的历史与发展历程
• Flutter的应用场景
• 配置Flutter开发环境
• 一些常用的Flutter指令
• 配置Android开发环境
• 配置iOS开发环境
• 配置Android模拟器
• 运行第一个Flutter模板应用1.1 认识Flutter
随着移动端开发的持续火热，越来越多的公司、组织和个人开发者开始寻求移动端跨平台开发的解决方案。传统上，一款完整的移动端应用要维护Android和iOS两套不同平台的代码，需要的开发资源更多，开发难度更大，周期也更长。跨平台的框架可以很好地解决这一痛点。目前较流行的移动端跨平台框架有FaceBook公司开发的React Native框架、阿里巴巴公司开发的Weex框架以及Google公司开发的Flutter框架。这些解决方案各有优劣，设计上采用的都是比较现代化的响应式开发思路。其中，Flutter在不同平台上的体验效果更佳，并且入门和上手更加容易。1.1.1 Flutter的前世今生与应用场景
提到React Native，可能很多前端开发者都有所耳闻，但是要说Flutter，知道的人可能就不多了。在2018年2月的移动大会上，Google公司发布了Flutter的第一个测试版本，其实Flutter的前身是一个名为sky_sdk的移动端开发框架，Flutter中提供了大量的UI组件，例如文本标签、按钮、列表以及流畅的动画效果，其中，组件的编程风格借鉴了React框架，采用较现代化的响应式开发思路。目前，Flutter依然保持着高速的版本迭代。
关于移动端开发，首先想到的就是iOS开发与Android开发。由于平台与运行设备的差异性，很多时候，公司的移动端项目都要维护两套完全不同的代码，成本很高。相比之下，Flutter是一种新的解决方案，致力于提升用户的UI体验，其目标是可以按照120FPS的帧率进行界面渲染，比如今绝大多数移动设备上的60FPS帧率要高一倍。从语言上，Flutter采用Dart开发语言，Dart是类似JavaScript的一种Web脚本语言，也是一种非常现代化的编程语言，并且有着先天的跨平台特性。对于界面炫酷、交互性强但原生逻辑简单的应用，Flutter有着不可比拟的优势。1.1.2 安装Flutter开发框架
Flutter可以跨平台地运行在macOS、Windows或Linux系统上，但是由于iOS程序开发的局限性，本书所有的程序在macOS系统上进行测试。Flutter的安装非常简单，首先可以从以下网址下载Flutter的最新安装包： https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos
如图1-1所示，选择平台为macOS，之后单击具体的Flutter版本进行下载，本书使用的是Flutter v1.0.0版本，建议你在学习时也使用这个版本。图1-1 下载Flutter安装包
下载完成后，将其解压到任意目录即可。需要注意，解压完成后，我们已经可以在当前Flutter目录的bin目录下执行相关的Flutter命令，但是这样十分不便，我们需要可以在系统的任意目录下执行Flutter命令。为达到此目的，在解压Flutter安装包后，需要进行系统环境变量的配置。
首先在终端执行如下命令，打开环境文件： vim $HOME/.bash_profile
执行上面的命令可能需要验证用户密码，输入计算机的启动密码即可（在输入密码时，终端可能没有反应，不过放心，这是正常的）。vim是终端上的一个文本编辑器工具，打开文件后，输入i进入编辑模式，在文件的末尾追加如下环境变量： export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export PATH=/usr/local/flutter/bin:$PATH
上面的前两个环境变量是为了方便国内用户对Flutter资源的访问，最后一个环境变量是Flutter的安装位置。需要注意，/usr/local/flutter是笔者计算机中Flutter的安装位置，你需要根据实际情况来配置这个变量，建议最好不要将Flutter安装在/usr/local/bin目录下，新版的Mac系统会自动保护这个文件夹。之后使用快捷键进入vim工具的命令模式，输入wq，按回车键，即可进行文件的保存，完成后在终端输入如下命令来刷新环境变量： source $HOME/.bash_profile
完成环境变量的配置后，就可以在任意目录下执行Flutter命令了。例如，输入如下命令可以查看帮助文档： flutter help
如果终端输出了类似如下的信息，就表示你的Flutter开发工具已经安装成功：
现在，你已经可以在终端使用命令进行Flutter应用的创建、运行、打包等操作了，但是先不要着急，还需要进行其他工具的安装和配置。1.2 配置iOS开发环境
Xcode工具是目前最主流、最完善的iOS开发集成环境，并且Xcode的下载和安装都非常简单，和任何一款App Store上的产品一样，几乎可以一键进行安装。本节将主要介绍Xcode开发工具的获取与安装。1.2.1 进行AppID的申请
在使用任何Apple产品之前，或者下载任何App Store官方的应用程序前，你需要先准备一个AppID账号。如果你没有准备AppID账号，那么可以在如下网站进行申请： https://appleid.apple.com/account#!&page=create
如图1-2所示，你需要填写申请AppID所需要的必需信息，其中有关安全问题和答案的部分在填写完后要牢记，如果以后密码需要修改或重设，就需要使用这些安全问题和答案。图1-2 填写AppID的注册信息
注册完成后，你填写的账号邮箱会收到一封验证邮件，根据邮件的提示完成验证即可。之后便可以真正地使用这个AppID账号了。1.2.2 获取Xcode开发工具
打开macOS系统中自带的App Store应用程序，在其中的搜索栏中输入Xcode搜索应用，如图1-3所示。图1-3 在App Store中搜索应用
找到其中的Xcode工具，单击“获取”进行安装，这时可能需要输入AppID账号和密码。
下载Xcode工具可能需要一段不短的时间。Xcode是一个非常完整的开发工具，其中包括模拟器、调试器、各种模板代码等工具。在下载和安装的过程中，你不需要做任何的额外操作，等待完成即可。1.3 配置Android开发环境
和iOS开发环境的配置相比，在macOS上配置Android开发环境要略微复杂一些，除了要下载和安装Android Studio工具外，还要进行模拟器相关的下载和配置。1.3.1 获取Android Studio开发工具
曾经，配置Android开发环境是一件非常痛苦的事，如今Google公司专门为中国区的Android开发者提供了资源网站使这件事变得非常容易。在如下网站可以直接下载Android Studio开发工具： https://developer.android.google.cn/studio/
下载完成后，根据安装引导完成安装即可。
运行Android Studio开发工具，选择Start a new Android Studio Project选项来创建一个新的Android工程，之后会弹出Android工程创建界面，如图1-4所示。图1-4 进行新工程创建
如图1-4所示，其中Application name用来设置应用的名称，Company domain用来设置公司的域名，Project location用来配置工程所在的目录位置。之后一直单击Next按钮直到完成配置即可。
下面我们进行Android模拟器的配置。在打开的Android Studio工具菜单栏中找到Tools，选择其中的Android选项，单击AVD Manager选项，如图1-5所示。图1-5 配置Android模拟器
在弹出的窗口中选择Create Virtual Device选项，打开如图1-6所示的界面。图1-6 选择模拟器型号
需要为创建的模拟器选择一个型号，单击Next按钮后，还需要为模拟器选择一个Android版本，如果第一次创建，那么可能需要下载一个Android系统版本，如图1-7所示。图1-7 选择模拟器Android系统版本1.3.2 为Android Studio添加Flutter插件
Android Studio开发工具和Flutter开发框架都是由Google公司开发并维护的，因此Android Studio工具对Flutter有着非常深入的支持，我们可以直接为Android Studio工具添加一些插件，使它成为专业的Flutter开发工具。
打开Android Studio工具的Preference窗口，选择其中的Plugins选项，如图1-8所示。图1-8 进行插件管理
单击图1-8中的Browse repositories按钮，进入插件搜索界面，如图1-9所示。图1-9 进行插件搜索
在搜索栏中分别搜索Dart和Flutter插件进行安装。其中，Dart插件用来进行Dart语言的相关代码分析支持，比如进行输入验证、代码补全等；Flutter插件用来进行Flutter工程的开发、运行、调试、重载等。这两个插件是在Android Studio上开发Flutter工程必不可少的工具。
安装完成后，重启Android Studio即可。在启动界面能看到，Android Studio工具已经可以直接创建Flutter工程，如图1-10所示。图1-10 Android Studio支持直接创建Flutter工程1.4 你的第一个Flutter应用
本节将试着创建第一个纯Flutter构建的应用程序，可以同时在Android和iOS两个平台运行。
使用Android Studio进行Flutter项目的创建非常简单。打开Android Studio开发工具，选择Start a new Flutter Project选项，之后会打开模板选择界面，如图1-11所示，选择Flutter Application模板。图1-11 选择Flutter Application模板
新建的Flutter工程的目录结构如图1-12所示。图1-12 新建的Flutter工程的目录结构
其中，android文件夹下放置的是Flutter在Android平台运行的相关代码。ios目录中存放的是Flutter在iOS平台运行的相关代码。lib目录是Flutter工程的核心目录，其中存放核心的Dart逻辑代码。在我们创建的模板工程中，默认生成了一个main.drat文件，这个文件是整个应用程序的入口文件。对于这个文件中的内容，你现在不必过多关注。test文件夹用来存放测试代码。除了这些文件夹外，pubspec.yaml文件是工程的配置文件，这个文件用来进行依赖和静态资源的配置。
创建的这个模板工程不需要额外编写任何代码即可直接运行。在Android Studio的工具栏上可以直接选择要运行的模拟器，并单击“运行”按钮运行，如图1-13所示。图1-13 选择模拟器并运行
如果当前没有正在运行的模拟器，那么可以在选择模拟器的地方直接打开一个Android或iOS模拟器。
单击“运行”按钮运行Flutter工程，第一次运行Flutter工程需要下载和安装一些依赖，这可能需要一些时间。完成后，如果没有异常产生，你就会看到如图1-14和图1-15所示的在模拟器上的效果。图1-14 在Android模拟器上的运行效果图1-15 在iOS模拟器上的运行效果
从图1-14和图1-15中可以看到，在Android和iOS平台上，Flutter有着非常一致的表现。在模板工程中，单击右下角的加号按钮，可以实现屏幕上数字的增加。
下面我们进行一些简单的修改，在main.dart中修改静态字符串，之后只要保存文件或者单击工具栏上的热重载按钮，即可实现应用程序的热刷新，如图1-16所示。图1-16 热重载功能按钮
热重载也是Flutter框架的一大特点，其可以在不重新编译的情况下进行快速重载，省去了开发者每次微小的修改都需要编译运行所消耗的时间。更强大的是，Flutter的热重载不会丢失当前的状态，大大缩减了开发周期。修改静态字符串的内容后，热重载应用程序，效果如图1-17所示。图1-17 对应用程序进行热重载
现在，你已经与Flutter进行了初次见面，若想更加深入地了解Flutter并且熟练地使用Flutter进行应用程序的开发，就需要学习一个神奇的语言：Dart。第2章 Dart语言基础
虽然到目前为止，Flutter仍然是一个较为年轻的框架，但是Dart编程语言已经有了一段历史，其在2011年10月就亮相了，2018年2月，Dart 2正式发布。Dart语言设计的初衷是专门针对Web开发做优化，让开发者可以更加无缝、高效地编写Web脚本代码。目前，Dart语言已经可以应用在Web、移动端和服务端产品的开发。因此，学习Dart语言对开发者来说是非常低成本、高回报的。
通过本章，你将学习到：
• Dart语言开发环境的安装与配置
• 变量的声明和定义
• 数值类型的应用
• 字符串类型的应用
• 布尔类型的应用
• 列表类型的应用
• Map类型的应用
• 算术运算符的应用
• 比较与类型运算符的应用
• 复合运算符与逻辑运算符的应用
• 位运算符的应用
• 条件运算符的应用
• 点运算符的应用
• 条件分支语句的应用
• 循环语句的应用
• 中断与多分支语句的应用
• 异常的处理2.1 Dart开发环境搭建
在上一章中，我们配置了Flutter开发环境，在Android Studio开发工具中集成了Flutter与Dart插件，并且运行了第一个Flutter工程。但是要深入地学习Dart编程语言，使用Android Studio是非常不方便的。因此，我们还需要配置一个Dart开发环境，进而更快、更方便地测试Dart语法。2.1.1 安装Dart SDK
本书中所有的示例都在macOS系统上演示。在macOS平台上安装Dart SDK需要借助homebrew工具，homebrew是一个软件包管理器，一般情况下，系统会默认安装，无须我们做额外的操作。
打开终端软件，在其中依次输入如下两条命令： brew tap dart-lang/dart brew install dart
如果安装成功，就会看到终端输出如下文字：
需要注意，上面的/usr/local/opt/dart/libexec路径非常重要，它是Dart语言的SDK目录，后面的配置需要用到这个目录。
安装完成后，可以在终端输入如下命令来验证Dart是否安装成功： dart --version
终端输出如下内容则表示安装成功： Dart VM version: 2.1.0 (Tue Nov 13 18:22:02 2018 +0100) on "macos_x64"
下面我们编写一个简单的Hello World程序来测试一下。新建一个文件，将其命名为1.Hello.dart，在其中编写如下代码：
上面是一个简单的Dart程序，main函数是程序的入口，print函数用来进行标准输出。在终端使用dart命令运行这个文件： dart /Users/jaki/Desktop/1.Hello.dart
运行后，可以在终端看到输出结果“Hello World”。2.1.2 配置Dart编辑器
安装Dart SDK后，我们可以在终端执行Dart程序文件，但是这样十分不便，首先在编写Dart代码的时候，使用的文本编辑器可能并不能给我们带来代码高亮和语法提示的帮助，而且每次修改都需要在终端运行非常耗时。幸运的是，我们可以使用一款名叫Sublime Text 3的编辑器软件，这个软件支持非常多的插件，当然其中也有与Dart语言相关的插件，通过安装一些插件，将Sublime Text 3配置成可以进行Dart代码提示、语法高亮以及直接运行和查看结果的开发平台。
首先，在如下网站下载最新的Sublime Text 3软件： http://www.sublimetext.com/
下载的是一个初始化的编辑器，在安装Dart相关插件之前，我们需要先安装一个名叫Package Control的Sublime Text插件管理器。
Package Control的安装非常简单，首先打开Sublime Text 3编辑器，使用快捷键打开命令行（`为数字1左边的按键），之后将下面的脚本复制进去，按回车键即可：安装需要一段时间。安装完成后，在Sublime Text中使用快捷键可以打开Package Control工具，如图2-1所示。图2-1 使用Package Control的插件安装功能
选中这个选项后，会弹出一个可用的插件列表，如图2-2所示。
试读结束[说明：试读内容隐藏了图片]