极客时间已完结课程限时免费阅读

01 | 预习篇 · 从0开始搭建Flutter工程环境

01 | 预习篇 · 从0开始搭建Flutter工程环境-极客时间

01 | 预习篇 · 从0开始搭建Flutter工程环境

2019-07-01 陈航 来自北京
《Flutter核心技术与实战》
课程介绍

讲述：陈航

时长12:45大小10.21M

你好，我是陈航。
俗话说，工欲善其事，必先利其器。任何一门新技术、新语言的学习，都需要从最基础的工程环境搭建开始，学习 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 -a Simulator 打开 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-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 官网，选择并下载最新的稳定版（截止至本文定稿，最新稳定版为 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', textDirection: TextDirection.ltr));
}
}
void main() => runApp(new MyAPP());
点击 Run 图标，然后试着修改一下代码，保存后仅需几百毫秒就可以看到最新的显示效果。
图 7 热重载
是不是很 Cool！但是，热重载也有一定的局限性，并不是所有的代码改动都可以通过热重载来更新。
对 hello_world 示例而言，由于 Flutter 并不会在热重载后重新执行 main 函数，而只会根据原来的根节点重新创建控件树，因此我们刚才做了一些改造之后才支持热重载。
关于 Flutter 热重载的原理以及限制原因，我会在后面“34 | Hot Reload 是怎么做到的？”文章，和你详细分析。现在，你只需要知道，如果热重载不起作用的时候，我们也不需要进行漫长的重新编译加载等待，只要点击位于工程面板左下角的热重启（Hot Restart）按钮就可以以秒级的速度进行代码重编译以及程序重启了，而它与热重载的区别只是因为重启丢失了当前程序的运行状态而已，对实际调试也没什么影响。
图 8 热重启

总结

通过今天的内容，相信你已经完成了 Flutter 开发测试环境的安装配置，对如何在安装过程中随时检测工程依赖，以及如何分别在 Android 和 iOS 真机及模拟器上运行 Flutter 程序有了一定的理解，并对 Flutter 开发调试常用工具有了初步的认知。
善用这些集成工具能够帮助我们能提升 Flutter 开发效率，而这些有关工程环境的基础知识则为 Flutter 的学习提供了支撑。这样，如果你后续在开发测试中遇到了环境相关的问题，也就知道应该如何去解决。

思考题

你在搭建 Flutter 工程环境的过程中，遇到过哪些问题，又是怎么解决的呢？
欢迎留言告诉我，我们一起讨论。感谢你的收听，也欢迎你把这篇文章分享给更多的朋友一起阅读。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享

赞 8

提建议

© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
开篇词 | 为什么每一位大前端从业者都应该学习Flutter？
下一篇
02 | 预习篇 · Dart语言概览
 写留言

精选留言(87)

  • 蜉蝣
    2019-07-02
    第一次搞移动端的东西，搭建环境花费了些时间。成功后我把过程记录了下来，希望能帮到搭环境时遇到问题的朋友：http://youguanxinqing.xyz/index.php/archives/95/

    作者回复: 棒棒哒

    共 3 条评论
    15
  • espelansa
    2019-07-16
    写给和我一样的小白选手：如果你也显示flutter: command not found，那很有可能是编辑完.bash_profile文件没有执行这个文件。需要在终端执行source ~/.bash_profile 命令。执行后可以echo $PATH，看下是否有你刚刚写入的路径，像我会有/Users/XXXX/Documents/flutter/bin:。然后再按照老师的要求使用flutter命令就不会找不着啦。
    14
  • Qilin Lou
    2019-07-01
    我用的VS Code写，也挺方便的

    作者回复: 是的

    共 3 条评论
    12
  • 小破孩儿
    2019-07-03
    pod 默认安装是从github来clone，太大了，总超时，没办法改成 https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/ 了
    6
  • Eren
    2019-07-06
    在公司安装Flutter的时候一帆风顺，在家里的win7系统上面安装Flutter时踩了几乎所有的坑，折磨了很久，其中最主要的原因还是墙的问题。
    4
  • BLANK
    2019-07-02
    这个 xcode 有点坑啊，一定要升级系统
    共 1 条评论
    3
  • 国良
    2019-07-01
    Xcode用了n年，前两年开始用native script、react native做跨平台，以及后端的node js开发都是用vscode，对于android studio不慎了解，没有仔细的学习过，它比VS code好吗？

    作者回复: VS Code也挺好用的，选自己最趁手的就好

    4
  • Eagle~
    2019-08-07
    感觉环境配置有点简略了，忽略了安装中可能出现的问题，不如https://book.flutterchina.club/chapter1/install_flutter.html这篇文章详细。

    作者回复: 感谢你的建议。不过Flutter的依赖库比较多，开发运行环境也相对多样，加上特殊的网络限制，穷举安装过程中可能出现的各类问题也许并不现实，毕竟我们无法通过docker或者虚拟机这样的手段去把大家的开发环境完全统一，所以我更希望能够给大家讲清楚在安装过程中，每个阶段要做的事情的目的、意义和方法，这样在遇到问题时能够缩小范围，做到有章可循。通常来说，flutter doctor -v和镜像配置可以解决80%的问题，20%使用关键字搜索甄别可以基本搞定

    共 2 条评论
    2
  • 🌙
    2019-07-28
    在xcode上运行hello world项目提示could not find included file 'Generated.xcconfig' in search paths (in target 'Runner')，这个怎么解决？

    作者回复: flutter build ios先

    2
  • 红烧清蒸
    2019-07-03
    输入flutter emulators --launch Nexus_6P_API_27命令后报错： emulator: ERROR: Running multiple emulators with the same AVD is an experimental feature. Please use -read-only flag to enable this feature. 请问需要怎么解决

    作者回复: 同时只能启动了1个android模拟器，你把其他的模拟器全部退出再试试

    共 2 条评论
    2
  • Geek_e5e85a
    2021-06-24
    老师，我在公司的电脑里 输入 flutter doctor 命令一直没有反应，AS创建Flutter项目的时候也是界面一直卡住没反应
    2
  • Asia
    2020-11-10
    老师讲的安装方法的跟官方文档的一样，但是国内由于被墙，有些镜像还会失效，下载起来那叫一个奇慢无比。 建议直接用清华大学的镜像安装。 安装文档见 https://mirrors.tuna.tsinghua.edu.cn/help/flutter/ （如果遇到什么压缩文件找不到的问题，直接到bin/cache下找到对应的文件注释掉即可）
    1
  • 与山鬼说
    2020-05-20
    首次运行前，需要提前打开手机模拟器； 如果编译运行时，出现程序卡在“Running Gradle task 'assembleDebug'...”提示的情况下， 请查看简书踩坑记录： https://www.jianshu.com/p/171a9660e1f9
    1
  • MaO
    2019-10-20
    是不是还要装dart SDK

    作者回复: 不用，flutter自带了

    共 2 条评论
    1
  • 靠人品去赢
    2019-08-05
    冒个泡，win的Android studio没有这个preference的选项，安装插件要到file里面的setting中去搜索安装flutter。 据说mdp今年要改模具，不想用旧的，又不想当小白鼠，难受。

    作者回复: 用什么IDE不重要，自己用着趁手就行

    1
  • deadline
    2019-07-10
    flutter doctor 帮你诊断环境和配置问题 还有提供解决方法 真的很好用
    1
  • 徐云天
    2019-07-04
    我一直以为fluter是在web的基础上打包，然后andriod，ios上运行，，，，，

    作者回复: 没想到吧

    1
  • 水一
    2022-04-01
    所有东西都装好了，maven也换成了阿里的，运行hello_world就一直报错，本来是在windows上搭的就是报这个错误，后来在mac上搭也是一摸一样的错，网上找不到解决方案 Running Gradle task 'assembleDebug'... √ Built build\app\outputs\flutter-apk\app-debug.apk. Installing build\app\outputs\flutter-apk\app.apk... Error: ADB exited with exit code 1 Performing Streamed Install adb: failed to install D:\Program Files\flutter\examples\hello_world\build\app\outputs\flutter-apk\app.apk: Failure [INSTALL_PARSE_FAILED_MANIFEST_MALFORMED: Failed parse during installPackageLI: /data/app/vmdl1767277902.tmp/base.apk (at Binary XML file line #28): io.flutter.embedding.android.FlutterActivity: Targeting S+ (version 31 and above) requires that an explicit value for android:exported be defined when intent filters are present] Error launching application on sdk gphone64 x86 64.
    展开
    共 1 条评论
  • Geek_36419e
    2022-02-14
    还需要xcode吗？就是必须苹果电脑才能开发？
  • 浩然
    2021-04-13
    555 现在看这个课 Dart感觉都是函数式的