决胜 Flutter 系列之第一章：熟悉战场

欢迎参加“决胜 Flutter” 实训课程，这里是你此次实训之旅的起点。本章将带您快速了解移动开发的现状，然后向您介绍 Flutter 的发展历史以及优势特点，最后一起动手，搭建高效的开发环境。

通过本场 Chat，您将获得以下知识：

移动开发的现状
Flutter 的历史
Flutter 的特性
Flutter 的体系结构
在 Mac OS 中搭建 Flutter 开发环境
Flutter SDK 的升级
首个 Flutter App 的运行
Flutter 常用命令

感谢支持！

欢迎参加“决胜 Flutter” 实训课程，这里是你此次实训之旅的起点。

本章将带您快速了解移动开发的现状，然后向您介绍 Flutter 的发展历史以及优势特点，最后一起动手，搭建高效的开发环境。

由于 Flutter 跨平台（同时支持 Android、iOS、Web 以及 PC）的特性，本套教程将以 Mac OS 作为操作系统环境，版本号为 10.14。如果读者使用的是 Windows 或者 Linux，请结合 Flutter 官方网站的配置指导进行操作。需要指出的是，Windows 和 Linux 是无法编译生成 iOS 版本 App 的。

好了，闲话不多说，我们马上进入正题！

移动开发的现状

今天，我们不得不承认，移动互联网的出现和兴起，给我们的生活和社交带来了前所未有的改变。一部小小的手机不仅是通信的工具，更有着日常生活、移动办公、社交网络等实用工具的属性，已经成为大部分人可信赖的“伙伴”，不断冲击着报纸、广播、电视等传统媒体。

事实上，移动互联网发展得如此迅速，操作系统只提供了“平台”，更多得益于其丰富的 App 生态。也正是因为这样的原因，诞生了一个又一个爆款 App。在这些爆款的背后，则是无数的 UI/UE 设计师、软件工程师、测试工程师等幕后英雄的贡献。

同时，随着移动互联网的高速发展，移动 App 的开发模式也在快速更迭中发展。

最初，为了能够在不同系统环境上运行，通常要求开发团队进行多平台并行开发。通常，开发 Android 和 iOS App 一共需要两个开发团队，维护两套源代码，分别进行测试。

后来，人们逐渐意识到，这样的开发效率并不高，成本却不低。因此诞生了一个接一个的跨平台解决方案。比如 React Native、PhoneGap、DCloud 等等。但无一例外地，它们都无法摆脱低性能的 JavaScript 或者原生代码依赖，或多或少地存在不足，某些知名的 App 技术团队已经宣布弃用它们。

亟需一个真正能够打通多平台且高性能的框架来“救场”，Flutter 则应运而生。可以说，Flutter 的出现有一定的“必然性”。

初识 Flutter

先让我们和 Flutter 这个新伙伴说声“你好”，然后了解一下这位新伙伴吧！

Flutter 的历史

说到 Flutter 的诞生，要追溯到 2014 年。一开始，它被叫做 Sky，同年 10 月在 GitHub 上开源。一年后，Sky 正式更名为 Flutter。首次对外公布 Flutter 是在 2017 年 5 月的 Google I/O 大会上，从此，Flutter 正式进入大家的视野，当时的版本号是 Alpha 0.0.6。2018 年 2 月，发布了 Flutter 1.0 测试版，即 Beta1。同年 6 月份发布预览版，即 Preview 版本。12 月发布 1.0 正式版。2019 年 2 月，在 1.2 版本中，首次增加了对 Web 的支持。

截至目前，GitHub 上的 Flutter SDK 已经有 201 个发布版本，超过 15000 多次代码提交，400 多位知名工程师参与其中，其问题的响应速度和处理效率同样非常之迅速……这些都奠定了 Flutter 终将成为开发者称心如意的开发框架。

Flutter 的特性

那么，Flutter 究竟有哪些特性呢？抑或是有哪些优点呢？

统一的应用开发体验：Flutter 拥有丰富的库，帮助开发者快速实现项目需求。同时，大部分的工具和库同时支持 Android 和 iOS；
快速开发：得益于 Flutter 框架“热重载”的特性，可以帮助开发者更高效地进行开发和测试，更利于修复 Bug；
界面生动：Flutter 支持跨平台开发，同样支持 Material Design（原生 Android 设计语言）和 Cupertino（原生 iOS 设计语言）风格的控件。开发者可根据设计需要实现不同风格的 UI 界面；
原生性能：无论在 Android 还是 iOS 环境中，Flutter 可以提供与原生应用一样的性能，甚至支持 120 HZ 的高刷新率；
响应式框架：Flutter 支持响应式框架，在某些场景下，开发者无需付出任何代价，即可完成不同屏幕的适配，使 UI 的构建更加轻松；
混合开发：Flutter 可以与平台原生代码相结合，支持较新的 Kotlin 和 Swift 开发语言。借助该特性，可以轻松访问 Android 或 iOS 上的原生系统功能和系统 API。

到目前为止，Flutter 已经广为接受，某些知名厂商已经推出了自己的 Flutter App，比如中国的阿里巴巴、腾讯、京东等等。在 Flutter 官方网站的 Showcase 页面中，可以找到很多使用 Flutter 框架开发出的知名产品。

图 1.1 使用 Flutter 框架的 App

Flutter 的体系结构

Flutter 框架采用的是“分层结构”。每一层都建立在另一层的基础上，如下图所示：

图 1.2 Flutter 框架结构

显而易见地，整个 Flutter 框架由三层组成，从上到下分别是 Framework（框架）层、Engine（引擎）层以及 Embedder（嵌入）层。

框架层：框架层由 Dart 编程语言实现，涵盖了界面组件、动画、手势等等；
引擎层：引擎层由 C/C++编程语言实现，涵盖了 Skia、Dart 和 Text：
1. Skia：负责处理图形，它是一个开源的图形库，自身提供了适用于不同软硬件平台的 API。Flutter 框架直接使用 Skia 引擎来渲染组件，既摆脱了对传统浏览器的依赖，又摆脱了平台原生控件；
2. Dart：包括 Dart 运行时环境、垃圾收集、JIT/AOT 编译等和 Dart 相关的支持。经过 AOT 静态编译的代码能够使用本机指令集运行，从而确保了 Flutter App 能够和原生 App 一致的性能；
3. Text：负责文本渲染；
嵌入层：嵌入层可以理解为“兼容层”。正是嵌入层的出现，才确保了 Flutter App 可以在不同的平台上运行，该层实现了平台无关性。

到此，是不是有点跃跃欲试，想不想亲手开发出一款 Flutter App 呢？
不如马上行动，让 Flutter App 在设备上跑起来！

搭建 Flutter 开发环境

动手时间到！第一次，我们先来完成“教学关卡”——配置开发环境。
中国有句古话：“工欲善其事，必先利其器。”没有顺手的工具是不行的。通过这一节的学习和实践，相信每位读者都能有一把“开发利器”。
让我们开始吧！

Java 开发环境的安装与配置

配置 Java 开发环境的目的是为了让我们的电脑可以编译 Android 应用程序。

和安装其他软件类似地，在 Mac OS 上配置 Java 开发环境非常简单。只需下载对应的安装包文件，然后启动安装即可。Java 开发工具包可以在 Oracle 官方网站找到，然后下载对应版本即可。这里推荐大家安装 JDK 8 版本。

图 1.3 Java 开发工具包下载页面

下载好后启动安装，片刻等待，进度条满即宣告安装结束。

图 1.4 安装 Java 开发工具包

之后，可以启动终端，在终端窗口中键入

java –version

并回车。能正常输出 Java 版本信息则表明安装配置无误。

图 1.5 Java 版本信息

Android 开发环境的安装与配置

接下来配置 Android 开发环境，我们将使用 Android Studio 作为集成开发环境（也称为 IDE）。

首先，我们到 Android 开发者网站下载 Android Studio 安装包文件。和前文中所述的 Java 开发工具包类似，下载后安装即可完成配置过程。

图 1.6 Android Studio 下载页面

当我们点击“DOWNLOAD ANDROID STUDIO”按钮后，网页会自动识别当前系统并下载最合适的版本。

图 1.7 Android Studio 的安装

通常，Android Studio 的安装会比 Java 开发工具包的安装更耗时。静候进度条满，我们便可以启动 Android Studio 了。

首次启动会弹出向导，这个向导会指引我们对 IDE 进行初步配置，并下载缺失的 SDK。

图 1.8 Android SDK 的下载

需要注意的是，通过首次启动向导下载的 SDK，默认只包含了最新版本的内容。如果读者要下载更多的 SDK 版本，便于日后开发，可以在启动 Android Studio 后，进入 Settings（设置），并查找 SDK Manager（SDK 管理器）。在这里可以下载到 Android SDK 所有的内容。

接下来，让我们为 Android Studio 添加编译 Flutter App 的能力。

进入 Settings（设置），然后查找 Plugin（插件），在上方的搜索框中键入 flutter，并回车。如下图所示：

图 1.9 Flutter 插件安装

点击 INSTALL（安装），会提示安装 Dart，点击 YES（是）继续。安装完成后，重新启动 Android Studio。启动界面上已经可以看到新建 Flutter 工程的入口了：

图 1.10 新建 Flutter 工程入口

最后，日后方便地使用 adb 等命令，还需要把 Android SDK 的路径加入到环境变量中。启动终端窗口，输入

sudo vi ~/.bash_profile

并回车，开始编辑用户级环境变量。在文件的末尾添加如下内容：

ANDROIDHOME=/Users/wenhan/Library/Android/sdkexport PATH=$PATH:$ANDROIDHOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools

保存，然后退出 vi 编辑器。最后，输入：

source ~/.bash_profile

然后回车，使环境变量立即生效。测试一下 adb 命令，正常情况将会出现 adb 使用说明文档。

iOS 开发环境的安装配置

在 Mac OS 中配置 iOS 开发环境再简单不过了，只要启动 Mac 上的 App Store，然后搜索 Xcode，安装即可。这一步骤可能会耗时很长，在安装时还有可能表现为卡住不动，实际上是安装的内容较多导致的，需要耐心等待。

安装好后，启动终端，输入

sudo xcode-select –switch /Application/Xcode.app/Contents/Developer

并回车，配置 Xcode 命令行工具。
最后，输入

sudo xcodebuild –license

并回车，接受许可协议。

其他系统必备组件的安装与配置

检查系统必备命令行工具

除了上述 IDE 的配置外，Flutter 还依赖某些命令行工具，才能成功完成编译。这些工具包括：

bash
curl
git 2.x
mkdir
rm
unzip
which

好消息是，Mac OS 系统本身已经内置了上述命令，我们仅需确认这些命令能否正常运作即可。

设置 Flutter Pub 镜像站

此外，由于 Flutter 服务器在国内访问可能出现不稳定的现象，我们需要添加两对环境变量，将 Flutter 包管理网站指向国内的镜像站。该镜像站由 GDG China 管理和维护，因此无需担心安全性问题。还记得环境变量的配置方法吗？尝试添加如下两对值：

PUBHOSTEDURL=https://pub.flutter-io.cn FLUTTERSTORAGEBASE_URL=https://storage.flutter-io.cn

如果不慎忘记了配置方法，请参考 1.3.2 节末尾的内容，如法炮制就好。

安装缺失的组件

对于编译 iOS App，我们还需要安装一些附加工具，这些附加工具被 homebrew 管理，它堪称 Mac OS 平台不可或缺的组件管理器。因此，我们需要先安装 homebrew 软件包管理工具。方法是启动终端，然后输入如下命令后回车：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

系统会自动完成安装。之后，依次执行下列几条命令，完成剩余的配置：

brew update
brew install –HEAD usbmuxd
brew link usbmuxd
brew install –HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

安装 Visual Studio Code

在正式进行 Flutter App 开发前，我们需要学习一种全新的编程语言——Dart。学习 Dart 编程语言无需 Android Studio，也无需任何移动设备。与此相反，一款得心应手的文本编辑器会更加合适，所以更推荐各位读者使用 Visual Studio Code。

Visual Studio Code 同样是跨平台的 IDE，因此无论您是使用 Mac OS，Windows 或者是 Linux，都可以使用 Visual Studio Code。

官方网站下载 Visual Studio Code，运行安装程序进行安装，之后不要忘记安装 Flutter 插件。

图 1.11 Visual Studio Code 插件配置

Flutter 开发环境的安装与配置

Flutter SDK 的下载和配置

接下来，我们需要下载和配置 Flutter SDK。

下载 Flutter SDK 的方式有两种选择。第一种是通过 Flutter 官方网站提供的下载链接；第二种则是通过 Git Clone（克隆）的方式下载。由于服务器偶尔会出现连接不稳定的现象，因此，第二种方式最更稳妥的选择。

启动终端，定位到要存放 Flutter SDK 的目录下，输入：

git clone -b stable https://github.com/flutter/flutter.git

此处的 stable 表示要下载稳定版，也可以改为 dev 来下载最新的开发版。

图 1.12 Git Clone 方式下载稳定版 Flutter SDK

根据网络连接状况，这个过程通常会持续几分钟，需要耐心等待。
下载好后，别忘了配置环境变量，它可以帮助我们在任何位置执行 flutter 命令。按照前文中提过的方法，这里只需追加 PATH 变量值即可，如下所示：

export PATH="$PATH:~/Development/flutter/bin"

1.3.5.2 复查所有环境变量的配置

到此，关于环境变量的配置就全部完成了，我们回顾一下所有配置的环境变量，如下图所示：

图 1.13 所有的环境变量配置

需要特别注意的是，上述环境变量配置的值并非在所有电脑上都一致。请各位读者结合自身电脑的具体情况进行配置，并在配置后执行相应的指令测试，以确保环境配置无误。

执行 Flutter 自诊断脚本

运行终端，输入

flutter doctor

并回车，等待诊断完成。出现下图所示的输出则代表配置准确无误。

图 1.14 正确的环境配置

诊断进程结束后，会出现类似上图的诊断报告，除了表示正确的对勾外，还可能会遇到感叹号或者叉号。出现感叹号表示它是一条警告，可能不会影响工程的正常编译运行；而叉号则要引起重视了，它表示一种错误。不进行处理的话将会影响工程的编译和运行。
如果不幸出现了由叉号的项目，别担心，您可以在 1.3.7 疑难排查小节中找到解决它们的办法。

升级 Flutter SDK

由于 Flutter 处在快速发展迭代中，时刻保持最新不但可以体验到新版本带给我们的新功能，而且可以规避老版本中存在的某些问题。
当我们按照前文所描述的方法配置好环境变量后，随时可以在终端执行

flutter upgrade

命令检查并更新到最新版本的 flutter SDK 了。

疑难排查

git clone 速度过慢甚至报错：出现该问题，可以尝试访问官网，进入 SDK 下载页面，直接下载，并在完成后解压。压缩包内存在.git 文件夹，不影响日后的版本升级；
出现警告（Android toolchain - develop for Android devices…）：执行

flutter doctor --android-licenses

并同意所有的许可协议；

出现错误（Missing Xcode dependency: Python module "six"）：执行

pip install six

或

sudo easy_install six

或依次执行：

brew reinstall python@2
pip install six；

升级 SDK 过程中出错：检查是否配置了正确的环境变量，或者直接重新下载最新版本。

首个 Flutter App——计数器

接下来，我们创建一个计数器应用，用户每点击依次屏幕右下方的按钮，屏幕中间的数值增加 1，如下图所示：

图 1.15 计数器 App

计数器 App 是创建 Flutter 工程后的默认 App，我们无需修改代码，直接运行即可实现。

创建 Flutter 工程

有两种方式创建 Flutter 工程，第一种是通过 Android Studio 的新建工程向导；另外一种是通过 flutter 命令行。

作者建议使用 flutter 命令行创建项目，然后在 Android Studio 中打开。因为在网络连接不稳定时，新建工程向导可能会导致 Android Studio 停止响应。

使用命令行创建项目的方法非常简单，首先来到要存放工程代码的目录，然后执行：

flutter create hello_flutter

稍等片刻，即可完成工程的创建。有关 flutter 的更多命令行用法，将在 1.4.3 节中提及。

创建好工程后，启动 Android Studio，选择“Open an existing Android Studio project”，在弹出的目录选择对话框中，定位到代码所在目录，点击 OK，即可打开工程。

图 1.16 Android Studio 工作区

怎么样，还算简单吧？

在设备上运行 Flutter App

最后，我们把代码运行在设备上。您可以选择在电脑上启动模拟器，或者连接一台开启了调试权限的手机。
作者建议各位使用实体设备，而非模拟器。一方面，实体设备最接近用户最终体验，并且更加流畅；另一方面，某些传感器，如 NFC、蓝牙等，是很难通过模拟器实现的。本教程也将结合实体设备——一台真正的手机（Android）进行讲解。
启动手机，开启开发者选项中的 USB 调试，然后连接电脑。点击 Android Studio 右上角的绿色小三角图标，稍等片刻，像图 1.15 那样，一个简单的 flutter App 就部署到手机上了。尝试和它互动一下吧！

Flutter 常用命令

在实际开发中，我们有必要掌握一些 flutter 的常用命令，这将帮助我们更有效率地进行开发。

创建项目：

flutter create myapp：以 myapp 为名创建工程；
flutter create -a kotlin myapp：以 myapp 为名创建工程，并添加对 Kotlin 语言的支持；
flutter create -i swift myapp：以 myapp 为名创建工程，并添加对 Swift 语言的支持；

获取工程中引用的库：

flutter packages get
更新工程中引用的库：

flutter packages upgrade
运行 App：

flutter run：运行在默认的首选设备上；
flutter run -d 5554：运行在 ID 为 5554 的设备上。

进入调试模式：

flutter attach
打包生成安装文件：

flutter build apk：生成 Android 平台的安装包文件；
flutter build ios：生成 iOS 平台的安装包文件。

小结

请回顾以下几个知识点，确保这些内容都已经了然于心：

flutter 的特点与优势；
flutter 框架的体系结构；
开发 flutter App 的环境搭建；
升级已有的 flutter SDK；
创建简单的 flutter App；
运行 flutter App 在设备上；
必知必会的 flutter 常用命令。

你可能会注意到，上述内容并未涵盖本章的所有方面。这是因为上述的知识点是必须要掌握的，而非仅作了解。
请您确认上述内容已经完全掌握后，再进入下一章的学习。
在下一章中，我们要进行一场“特训”，目的是让各位读者快速入门并掌握 Dart 开发语言。我们还将结合计算机领域的某些经典算法进行强化练习，请做好准备，我们即刻出发！

本文首发于 GitChat，未经授权不得转载，转载需与 GitChat 联系。

阅读全文: http://gitbook.cn/gitchat/activity/5d778a49ab5534025157f880

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ， GitChat 专享技术内容哦。

FtooAtPSkEJwnW-9xkCLqSTRpBKX