从0开始搭建Flutter工程环境

由于是跨平台开发，所以为了方便调试，你需要一个可以支持 Android 和 iOS 运行的操作系统，也就是 macOS，因此后面的内容主要针对的是在 macOS 系统下如何配置 Flutter 开发环境。

如果你身边没有 macOS 系统的电脑也没关系，在 Windows 或 Linux 系统上配置 Flutter 也是类似的方法，一些关键的区别我也会重点说明。但这样的话，你就只能在 Android 单平台上开发调试了。

准备工作

安装 Android Studio

Android Studio 是基于 IntelliJ IDEA 的、Google 官方的 Android 应用集成开发环境 (IDE)。

我们在官网上找到最新版，下载后启动安装文件，剩下的就是按照系统提示进行 SDK 的安装和工程配置工作了。

配置完成后，我们打开 AVD Manager，点击“Create Virtual Device”按钮创建一台 Nexus 6P 模拟器，至此 Android Studio 的安装配置工作就完成了。

安装 Xcode

Xcode 是苹果公司官方的 iOS 和 macOS 应用集成开发环境 (IDE)。它的安装方式非常简单，直接在 macOS 系统的 App Store 搜索 Xcode，然后安装即可。

安装完成后，我们会在 Launchpad 看到 Xcode 图标，打开它，按照提示接受 Xcode 许可协议，以及安装配置组件就可以了。

配置完成后，我们打开 Terminal，输入命令 open -a Simulator 打开 iOS 模拟器，检查 Hardware>Device 菜单项中的设置，并试着在不同的模拟器之间做切换。

至此，Xcode 的安装配置工作也就顺利完成了。

安装 Flutter

Flutter 源站在国内可能不太稳定，因此谷歌中国开发者社区（GDG）专门搭建了临时镜像，使得我们的 Flutter 命令行工具可以到该镜像站点下载所需资源。

接下来，我们需要配置镜像站点的环境变量。对于 macOS 和 Linux 系统来说，我们通过文本编辑器，MacOS Catalina 10.15.4 系统版本之前打开~/.bash_profile 文件，10.15.4 系统版本之后打开~/. zshrc 在文件最后添加以下代码，来配置镜像站点的环境变量：

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

而对于 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 官网，选择并下载最新的稳定版。

接下来，我们把下载的压缩包解压到你想安装的目录，比如~/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 命令，查看当前可用的模拟器：

image

图 1 查看可用的 flutter 模拟器

可以看到，我们刚刚创建的两台模拟器，也就是 Nexus 6P 和 iOS 模拟器都已经在列表中了。于是，我们启动 iOS 模拟器，运行 Flutter 项目：

flutter emulators --launch apple_ios_simulator

flutter run

等待 10 秒左右，一个熟悉的 hello world 大屏幕就出现在我们面前了：

image

图 2 Flutter demo

Android 模拟器的启动和运行，也与之类似，我就不再赘述了。

不过，使用命令行的方式来开发调试 Flutter 还是非常不方便，更高效的方式是配置 Android 和 iOS 的集成开发环境。

Flutter 提供了一个命令 flutter doctor 协助我们安装 Flutter 的工程依赖，它会检查本地是否有 Android 和 iOS 的开发环境，如果检测到依赖缺失，就会给出对应依赖的安装方法。

接下来，我们试着运行下 flutter doctor 这条命令，得到了如下图所示的结果：

image

图 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 项目。

image

图 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 插件就可以了。

image

图 5 Flutter 插件安装

启动 Android Studio，打开菜单项 Preferences > Plugins，搜索 Flutter 插件并点击 install 进行安装。安装完毕后重启 Android Studio，Flutter 插件就生效了。然后依次执行下列指令：
$ flutter doctor --android-licenses

$ flutter channel dev

$ flutter upgrade

$ flutter doctor -v

由于 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 应用。

运行 Flutter 项目

用 Android Studio 打开 hello_world 工程（Open an existing Android Studio Project），然后定位到工具栏：

image

图 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 秒钟左右，就可以在模拟器或真机上看到启动的应用程序了。