你好，我是七侠。
俗话说，工欲善其事，必先利其器。任何一门新技术、新语言的学习，都需要从最基础的工程环境搭建开始，学习Flutter 也不例外。所以，作为专栏的第一篇文章，我会与你逐一介绍 Flutter 的开发环境配置，并通过一个 Demo 为
你演示 Flutter 项目是如何运行在 Andorid 和 iOS 的模拟器和真机上的。如果你已经掌握了这部分内容，那可以跳过
这篇预习文章，直接开始后面内容的学习。
由于是跨平台开发，所以为了方便调试，你需要一个可以支持 Android 和 iOS 运行的操作系统，也就是 macOS，因
此后面的内容主要针对的是在 macOS 系统下如何配置Flutter 开发环境。
如果你身边没有 macOS 系统的电脑也没关系，在Windows 或 Linux 系统上配置 Flutter 也是类似的方法，一些关键的区别我也会重点说明。但这样的话，你就只能在Android 单平台上开发调试了。
准备工作
安装 Android Studio
Android Studio 是基于 IntelliJ IDEA 的、Google 官方的Android 应用集成开发环境 (IDE)。
我们在官网上找到最新版（截止至本文定稿，最新版为3.4），下载后启动安装文件，剩下的就是按照系统提示进
行 SDK 的安装和工程配置工作了。
配置完成后，我们打开 AVD Manager，点击“Create Virtual Device”按钮创建一台 Nexus 6P 模拟器，至此Android Studio 的安装配置工作就完成了。
安装 Xcode
Xcode 是苹果公司官方的 iOS 和 macOS 应用集成开发环境 (IDE)。它的安装方式非常简单，直接在 macOS 系统的
App Store 搜索 Xcode，然后安装即可。
安装完成后，我们会在 Launchpad 看到 Xcode 图标，打开它，按照提示接受 Xcode 许可协议，以及安装配置组件就可以了。
配置完成后，我们打开 Terminal，输入命令open -aSimulator打开 iOS 模拟器，检查 Hardware>Device 菜单项中的设置，并试着在不同的模拟器之间做切换。
至此，Xcode 的安装配置工作也就顺利完成了。
安装 Flutter
Flutter 源站在国内可能不太稳定，因此谷歌中国开发者社区（GDG）专门搭建了临时镜像，使得我们的 Flutter 命令
行工具可以到该镜像站点下载所需资源。
接下来，我们需要配置镜像站点的环境变量。对于 macOS和 Linux 系统来说，我们通过文本编辑器，打开~/.bash_profile文件，在文件最后添加以下代码，来配置镜像站点的环境变量：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter
而对于 Windows 系统来说，我们右键点击计算机图标，依次选择属性–> 高级系统设置–> 高级–> 环境变量，新建用
户变量 PUB_HOSTED_URL，其值为https://pub.flutter-io.cn；随后新建 FLUTTER_STORAGE_BASE_URL，其值为https://storage.flutter-io.cn，重启电脑即可完成配置。
到这里，我们就完成了镜像的配置。
不过，由于 GDG 并不是官方组织，因此 Flutter 团队也无法保证此服务长期可用。但是，你也不用担心，可以关注
Flutter 社区 Using Flutter in China，来获取其他可用的镜像资源，随时更新环境变量即可。
随后，我们再去Flutter 官网，选择并下载最新的稳定版（截止至本文定稿，最新稳定版为 1.5）。
接下来，我们把下载的压缩包解压到你想安装的目录，比如~/Documents 或 C:\src\flutter。为了可以在命令行中执行flutter 命令，我们同样需要配置环境变量。
对于 macOS 与 Linux 系统，我们编辑~/.bash_profile 文件，把以下代码添加至文件最后，将 flutter 命令的执行路
径追加到环境变量 PATH 中：
export PATH=~/Documents/flutter/bin:$PATH
而对于 Windows 系统，我们在当前用户变量下 Path，以 ;为分隔符，在其后追加 flutter 命令行的全路径C:\src\flutter\bin，重启电脑即可完成配置。
到这里，我们就完成了 Flutter SDK 的安装。
打开 Flutter 根目录，我们可以发现有一个 examples 文件夹，里面是一些基本的 flutter 示例。在今天这篇文章中，
我会以 hello_world 示例为例，和你演示一下如何在模拟器和真机中运行 Flutter 项目。
首先，我给你介绍的是通过 Flutter 命令行运行的模式。进入 hello_world 目录，输入flutter emulators命令，查看
当前可用的模拟器：
:-: 图 1 查看可用的 flutter 模拟器
可以看到，我们刚刚创建的两台模拟器，也就是 Nexus 6P和 iOS 模拟器都已经在列表中了。于是，我们启动 iOS 模
拟器，运行 Flutter 项目：
flutter emulators --launch apple_ios_simulator
flutter run
等待 10 秒左右，一个熟悉的 hello world 大屏幕就出现在我们面前了：
图 2 Flutter demo
Android 模拟器的启动和运行，也与之类似，我就不再赘述
了。
不过，使用命令行的方式来开发调试 Flutter 还是非常不方便，更高效的方式是配置 Android 和 iOS 的集成开发环境。
Flutter 提供了一个命令flutter doctor协助我们安装Flutter 的工程依赖，它会检查本地是否有 Android 和 iOS的开发环境，如果检测到依赖缺失，就会给出对应依赖的安装方法。
接下来，我们试着运行下 flutter doctor 这条命令，得到了如下图所示的结果：
图 3 flutter doctor 命令示意
可以看到，flutter doctor 检测出了 iOS 工具链、Android Studio 工程这两项配置中的问题。此外，由于我的电脑还
安装了 IDEA 和 VS Code，而它们也是 Flutter 官方支持的IDE，因此也一并检测出了问题。
接下来，我们根据运行 flutter doctor 命令得到的提示，来分别解决 iOS 工具链和 Android Studio 工程配置问题。
iOS 工具链设置
现在，我们已经可以在 iOS 模拟器上开发调试 Flutter 应用了。但要将 Flutter 应用部署到真实的 iOS 设备上，我们还
需要安装一些额外的连接控制命令工具（就像通过电脑的iTunes 给手机安装应用一样），并申请一个 iOS 开发者账
号进行 Xcode 签名配置。
依据提示，我们首先安装 libimobiledevice 和ideviceinstaller 这两项依赖：
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
其中，usbmuxd 是一个与 iOS 设备建立多路通信连接的socket 守护进程，通过它，可以将 USB 通信抽象为 TCP
通信；libimobiledevice 是一个与 iOS 设备进行通信的跨平台协议库；而 ideviceinstaller 则是一个使用它们在 iOS
设备上管理 App 的工具。
现在，你不了解它们的具体作用也没关系，只要知道安装了它们，Flutter 就可以进行 iOS 真机的开发调试就可以了。然后，进行 Xcode 签名配置。
打开 hello_world 项目中的 ios/Runner.xcworkspace，在Xcode 中，选择导航面板左侧最上方的 Runner 项目。
图 4 Flutter Xcode 签名配置
在General > Signing > Team 中，我们需要配置一下开发团队，也就是用你的 Apple ID 登录 Xcode。当配置完成
时，Xcode 会自动创建并下载开发证书。
任意 Apple ID 都支持开发和测试，但如果想将应用发布到App Store，则必须加入 Apple 开发者计划。开发者计划的
详细信息，你可以通过苹果官方的compare memberships了解，这里我就不再展开了。
最后，当我们第一次连接真机设备进行开发时，Xcode 会在你的帐户中自动注册这个设备，随后自动创建和下载配置文件。我们只需要在真机设备上，按照手机提示，信任你的Mac 和开发证书就可以了。
至此，我们就可以在 iOS 真机上开发调试 Flutter 项目了。
Android 工具链配置
相对于 iOS 工具链的设置，Android 工具链配置就简单多了，这是因为 Google 官方已经在 Android Studio 中提供
了 Flutter 和 Dart 这两个插件。因此，我们可以通过这两个工程插件，进行 Flutter 项目的管理以及开发调试。又因
为 Flutter 插件本身依赖于 Dart 插件，所以我们只安装Flutter 插件就可以了。
图 5 Flutter 插件安装
启动 Android Studio，打开菜单项 Preferences >Plugins，搜索 Flutter 插件并点击 install 进行安装。安装完毕后重启 Android Studio，Flutter 插件就生效了。
由于 Android Studio 本身是基于 IDEA 开发的，因此IDEA 的环境配置与 Android Studio 并无不同，这里就不再赘述了。
对于 VS Code，我们点击 View->Command Palette，输入"install"，然后选择"Extensions：Install Extension"。在搜索框中输入 flutter，选择安装即可。
至此，Android 的工具链配置也完成了。
尽管 Android Studio 是 Google 官方的 Android 集成开发环境，但借助于 Flutter 插件的支持，Android Studio 也因此具备了提供一整套 Flutter 开发、测试、集成打包等跨平台开发环境的能力，而插件底层通过调用 Xcode 提供的命令行工具，可以同时支持开发调试及部署 iOS 和Android 应用。
因此，我后续的分享都会以 Android Studio 作为讲解Flutter 开发测试的 IDE。
运行 Flutter 项目
用 Android Studio 打开 hello_world 工程（Open an existing Android Studio Project），然后定位到工具栏：
图 6 Flutter 工具栏
在 Target selector 中，我们可以选择一个运行该应用的设备。如果没有列出可用设备，你可以采用下面的两种方式：
参考我在前面讲到的方法，也就是打开 AVD Manager并创建一台 Android 模拟器；或是通过 open -a Simulator 命令，在不同的 iOS 模拟器之间进行切换。直接插入 Android 或 iOS 真机。
hello_world 工程稍微有点特殊，因为它提供了两个 Dart启动入口：一个英文版的 hello world-main.dart，和一个阿拉伯语版的 hello world-arabic.dart。因此，我们可以在Config selector 中进行启动入口的选择，也可以直接使用默认的 main.dart。
在工具栏中点击 Run 图标，稍等 10 秒钟左右，就可以在模拟器或真机上看到启动的应用程序了。
对于 Flutter 开发测试，如果每次修改代码都需要重新编译加载的话，那需要等待少则数十秒多则几分钟的时间才能查
看样式效果，无疑是非常低效的。
正是因为 Flutter 在开发阶段使用了 JIT 编译模式，使得通过热重载（Hot Reload）这样的技术去进一步提升调试效率成为可能。简单来说，热重载就是在无需重新编译代码、
重启应用程序、丢失程序执行状态的情况下，就能实时加载修改后的代码，查看改动效果。
备注：我会在“02 | 预习篇 · Dart 语言概览”中，与你分析 Flutter 使用 Dart 语言，同时支持 AOT 和 JIT。
就 hello_world 示例而言，为了体验热重载，我们还需要对代码做一些改造，将其根节点修改为 StatelessWidget：
import 'package:flutter/widgets.dart';
class MyAPP extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Center(child: Text('Hello World', text
}
}
void main() => runApp(new MyAPP());
点击 Run 图标，然后试着修改一下代码，保存后仅需几百毫秒就可以看到最新的显示效果。
图 7 热重载
是不是很 Cool！但是，热重载也有一定的局限性，并不是所有的代码改动都可以通过热重载来更新。
对 hello_world 示例而言，由于 Flutter 并不会在热重载后重新执行 main 函数，而只会根据原来的根节点重新创建控
件树，因此我们刚才做了一些改造之后才支持热重载。
关于 Flutter 热重载的原理以及限制原因，我会在后面“34| Hot Reload 是怎么做到的？”文章，和你详细分析。现在，你只需要知道，如果热重载不起作用的时候，我们也不需要进行漫长的重新编译加载等待，只要点击位于工程面板左下角的热重启（Hot Restart）按钮就可以以秒级的速度进行代码重编译以及程序重启了，而它与热重载的区别只是因为重启丢失了当前程序的运行状态而已，对实际调试也没什么影响。