你好知染，我是七俠。
俗話說斑胜，工欲善其事控淡，必先利其器。任何一門新技術止潘、新語言的學習掺炭，都需要從最基礎的工程環(huán)境搭建開始，學習Flutter 也不例外凭戴。所以涧狮，作為專欄的第一篇文章，我會與你逐一介紹 Flutter 的開發(fā)環(huán)境配置么夫，并通過一個 Demo 為
你演示 Flutter 項目是如何運行在 Andorid 和 iOS 的模擬器和真機上的者冤。如果你已經(jīng)掌握了這部分內(nèi)容，那可以跳過
這篇預習文章档痪，直接開始后面內(nèi)容的學習涉枫。
由于是跨平臺開發(fā)，所以為了方便調(diào)試腐螟，你需要一個可以支持 Android 和 iOS 運行的操作系統(tǒng)愿汰，也就是 macOS，因
此后面的內(nèi)容主要針對的是在 macOS 系統(tǒng)下如何配置Flutter 開發(fā)環(huán)境乐纸。
如果你身邊沒有 macOS 系統(tǒng)的電腦也沒關系衬廷，在Windows 或 Linux 系統(tǒng)上配置 Flutter 也是類似的方法，一些關鍵的區(qū)別我也會重點說明汽绢。但這樣的話吗跋，你就只能在Android 單平臺上開發(fā)調(diào)試了。
Android Studio 是基于 IntelliJ IDEA 的庶喜、Google 官方的Android 應用集成開發(fā)環(huán)境 (IDE)小腊。
我們在官網(wǎng)上找到最新版（截止至本文定稿救鲤，最新版為3.4），下載后啟動安裝文件秩冈，剩下的就是按照系統(tǒng)提示進
行 SDK 的安裝和工程配置工作了本缠。
配置完成后，我們打開 AVD Manager入问，點擊“Create Virtual Device”按鈕創(chuàng)建一臺 Nexus 6P 模擬器丹锹，至此Android Studio 的安裝配置工作就完成了。
Xcode 是蘋果公司官方的 iOS 和 macOS 應用集成開發(fā)環(huán)境 (IDE)芬失。它的安裝方式非常簡單楣黍，直接在 macOS 系統(tǒng)的
App Store 搜索 Xcode，然后安裝即可棱烂。
安裝完成后租漂，我們會在 Launchpad 看到 Xcode 圖標，打開它颊糜，按照提示接受 Xcode 許可協(xié)議哩治，以及安裝配置組件就可以了。
配置完成后衬鱼，我們打開 Terminal业筏，輸入命令open -aSimulator打開 iOS 模擬器，檢查 Hardware>Device 菜單項中的設置鸟赫，并試著在不同的模擬器之間做切換蒜胖。
至此，Xcode 的安裝配置工作也就順利完成了抛蚤。
Flutter 源站在國內(nèi)可能不太穩(wěn)定台谢，因此谷歌中國開發(fā)者社區(qū)（GDG）專門搭建了臨時鏡像，使得我們的 Flutter 命令
行工具可以到該鏡像站點下載所需資源霉颠。
接下來对碌，我們需要配置鏡像站點的環(huán)境變量。對于 macOS和 Linux 系統(tǒng)來說蒿偎，我們通過文本編輯器朽们，打開~/.bash_profile文件，在文件最后添加以下代碼诉位，來配置鏡像站點的環(huán)境變量：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter
而對于 Windows 系統(tǒng)來說骑脱，我們右鍵點擊計算機圖標，依次選擇屬性–> 高級系統(tǒng)設置–> 高級–> 環(huán)境變量苍糠，新建用
戶變量 PUB_HOSTED_URL叁丧，其值為https://pub.flutter-io.cn；隨后新建?FLUTTER_STORAGE_BASE_URL，其值為https://storage.flutter-io.cn拥娄，重啟電腦即可完成配置蚊锹。
到這里，我們就完成了鏡像的配置稚瘾。
不過牡昆，由于 GDG 并不是官方組織，因此 Flutter 團隊也無法保證此服務長期可用摊欠。但是丢烘，你也不用擔心，可以關注
Flutter 社區(qū) Using Flutter in China些椒，來獲取其他可用的鏡像資源播瞳，隨時更新環(huán)境變量即可。
隨后免糕，我們再去Flutter 官網(wǎng)赢乓，選擇并下載最新的穩(wěn)定版（截止至本文定稿，最新穩(wěn)定版為 1.5）说墨。
接下來骏全，我們把下載的壓縮包解壓到你想安裝的目錄，比如~/Documents?或?C:\src\flutter尼斧。為了可以在命令行中執(zhí)行flutter 命令，我們同樣需要配置環(huán)境變量试吁。
對于 macOS 與 Linux 系統(tǒng)棺棵，我們編輯~/.bash_profile 文件，把以下代碼添加至文件最后熄捍，將 flutter 命令的執(zhí)行路
徑追加到環(huán)境變量 PATH 中：
export PATH=~/Documents/flutter/bin:$PATH
而對于 Windows 系統(tǒng)烛恤，我們在當前用戶變量下 Path，以 ;為分隔符余耽，在其后追加 flutter 命令行的全路徑C:\src\flutter\bin缚柏，重啟電腦即可完成配置。
到這里碟贾，我們就完成了 Flutter SDK 的安裝币喧。
打開 Flutter 根目錄，我們可以發(fā)現(xiàn)有一個 examples 文件夾袱耽，里面是一些基本的 flutter 示例杀餐。在今天這篇文章中，
我會以 hello_world 示例為例朱巨，和你演示一下如何在模擬器和真機中運行 Flutter 項目史翘。
首先，我給你介紹的是通過 Flutter 命令行運行的模式。進入 hello_world 目錄琼讽，輸入flutter emulators命令必峰，查看
當前可用的模擬器：
:-: 圖 1 查看可用的 flutter 模擬器
可以看到，我們剛剛創(chuàng)建的兩臺模擬器钻蹬，也就是 Nexus 6P和 iOS 模擬器都已經(jīng)在列表中了吼蚁。于是，我們啟動 iOS 模
擬器脉让，運行 Flutter 項目：
flutter emulators --launch apple_ios_simulator
flutter run
等待 10 秒左右桂敛，一個熟悉的 hello world 大屏幕就出現(xiàn)在我們面前了：
圖 2 Flutter demo
Android 模擬器的啟動和運行，也與之類似溅潜，我就不再贅述
了术唬。
不過，使用命令行的方式來開發(fā)調(diào)試 Flutter 還是非常不方便滚澜，更高效的方式是配置 Android 和 iOS 的集成開發(fā)環(huán)境粗仓。
Flutter 提供了一個命令flutter doctor協(xié)助我們安裝Flutter 的工程依賴，它會檢查本地是否有 Android 和 iOS的開發(fā)環(huán)境设捐，如果檢測到依賴缺失借浊，就會給出對應依賴的安裝方法。
接下來萝招，我們試著運行下 flutter doctor 這條命令蚂斤，得到了如下圖所示的結果：
圖 3 flutter doctor 命令示意
可以看到，flutter doctor 檢測出了 iOS 工具鏈槐沼、Android Studio 工程這兩項配置中的問題曙蒸。此外，由于我的電腦還
安裝了 IDEA 和 VS Code岗钩，而它們也是 Flutter 官方支持的IDE纽窟，因此也一并檢測出了問題。
接下來兼吓，我們根據(jù)運行 flutter doctor 命令得到的提示臂港，來分別解決 iOS 工具鏈和 Android Studio 工程配置問題。
現(xiàn)在视搏，我們已經(jīng)可以在 iOS 模擬器上開發(fā)調(diào)試 Flutter 應用了审孽。但要將 Flutter 應用部署到真實的 iOS 設備上，我們還
需要安裝一些額外的連接控制命令工具（就像通過電腦的iTunes 給手機安裝應用一樣）凶朗，并申請一個 iOS 開發(fā)者賬
號進行 Xcode 簽名配置瓷胧。
依據(jù)提示，我們首先安裝 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 設備進行通信的跨平臺協(xié)議庫瘸洛；而 ideviceinstaller 則是一個使用它們在 iOS
設備上管理 App 的工具揍移。
現(xiàn)在，你不了解它們的具體作用也沒關系反肋，只要知道安裝了它們那伐，F(xiàn)lutter 就可以進行 iOS 真機的開發(fā)調(diào)試就可以了。然后石蔗，進行 Xcode 簽名配置罕邀。
打開 hello_world 項目中的 ios/Runner.xcworkspace，在Xcode 中养距，選擇導航面板左側最上方的 Runner 項目诉探。
圖 4 Flutter Xcode 簽名配置
在General > Signing > Team 中，我們需要配置一下開發(fā)團隊棍厌，也就是用你的 Apple ID 登錄 Xcode肾胯。當配置完成
時，Xcode 會自動創(chuàng)建并下載開發(fā)證書耘纱。
任意 Apple ID 都支持開發(fā)和測試敬肚，但如果想將應用發(fā)布到App Store，則必須加入 Apple 開發(fā)者計劃束析。開發(fā)者計劃的
詳細信息艳馒，你可以通過蘋果官方的compare memberships了解，這里我就不再展開了员寇。
最后鹰溜，當我們第一次連接真機設備進行開發(fā)時，Xcode 會在你的帳戶中自動注冊這個設備丁恭，隨后自動創(chuàng)建和下載配置文件。我們只需要在真機設備上斋日，按照手機提示牲览，信任你的Mac 和開發(fā)證書就可以了。
至此恶守，我們就可以在 iOS 真機上開發(fā)調(diào)試 Flutter 項目了第献。
相對于 iOS 工具鏈的設置，Android 工具鏈配置就簡單多了兔港，這是因為 Google 官方已經(jīng)在 Android Studio 中提供
了 Flutter 和 Dart 這兩個插件庸毫。因此，我們可以通過這兩個工程插件衫樊，進行 Flutter 項目的管理以及開發(fā)調(diào)試飒赃。又因
為 Flutter 插件本身依賴于 Dart 插件利花，所以我們只安裝Flutter 插件就可以了。
圖 5 Flutter 插件安裝
啟動 Android Studio载佳，打開菜單項 Preferences >Plugins炒事，搜索 Flutter 插件并點擊 install 進行安裝。安裝完畢后重啟 Android Studio蔫慧，F(xiàn)lutter 插件就生效了挠乳。
由于 Android Studio 本身是基于 IDEA 開發(fā)的，因此IDEA 的環(huán)境配置與 Android Studio 并無不同姑躲，這里就不再贅述了睡扬。
對于 VS Code，我們點擊 View->Command Palette黍析，輸入"install"卖怜，然后選擇"Extensions：Install Extension"。在搜索框中輸入 flutter橄仍，選擇安裝即可韧涨。
至此，Android 的工具鏈配置也完成了侮繁。
盡管 Android Studio 是 Google 官方的 Android 集成開發(fā)環(huán)境虑粥，但借助于 Flutter 插件的支持，Android Studio 也因此具備了提供一整套 Flutter 開發(fā)宪哩、測試娩贷、集成打包等跨平臺開發(fā)環(huán)境的能力，而插件底層通過調(diào)用 Xcode 提供的命令行工具锁孟，可以同時支持開發(fā)調(diào)試及部署 iOS 和Android 應用彬祖。
因此，我后續(xù)的分享都會以 Android Studio 作為講解Flutter 開發(fā)測試的 IDE品抽。
用 Android Studio 打開 hello_world 工程（Open an existing Android Studio Project）储笑，然后定位到工具欄：
圖 6 Flutter 工具欄
在 Target selector 中，我們可以選擇一個運行該應用的設備圆恤。如果沒有列出可用設備突倍，你可以采用下面的兩種方式：
參考我在前面講到的方法，也就是打開 AVD Manager并創(chuàng)建一臺 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 開發(fā)測試颈抚，如果每次修改代碼都需要重新編譯加載的話踩衩，那需要等待少則數(shù)十秒多則幾分鐘的時間才能查
看樣式效果，無疑是非常低效的贩汉。
正是因為 Flutter 在開發(fā)階段使用了 JIT 編譯模式驱富，使得通過熱重載（Hot Reload）這樣的技術去進一步提升調(diào)試效率成為可能。簡單來說匹舞，熱重載就是在無需重新編譯代碼褐鸥、
重啟應用程序鸿捧、丟失程序執(zhí)行狀態(tài)的情況下锹安，就能實時加載修改后的代碼，查看改動效果详炬。
備注：我會在“02 | 預習篇 · Dart 語言概覽”中姊舵，與你分析 Flutter 使用 Dart 語言晰绎，同時支持 AOT 和 JIT。
就 hello_world 示例而言括丁，為了體驗熱重載荞下，我們還需要對代碼做一些改造，將其根節(jié)點修改為 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 并不會在熱重載后重新執(zhí)行 main 函數(shù)，而只會根據(jù)原來的根節(jié)點重新創(chuàng)建控
件樹拦赠，因此我們剛才做了一些改造之后才支持熱重載。
關于 Flutter 熱重載的原理以及限制原因葵姥，我會在后面“34| Hot Reload 是怎么做到的荷鼠？”文章，和你詳細分析±菩遥現(xiàn)在允乐，你只需要知道矮嫉，如果熱重載不起作用的時候，我們也不需要進行漫長的重新編譯加載等待牍疏，只要點擊位于工程面板左下角的熱重啟（Hot Restart）按鈕就可以以秒級的速度進行代碼重編譯以及程序重啟了蠢笋，而它與熱重載的區(qū)別只是因為重啟丟失了當前程序的運行狀態(tài)而已，對實際調(diào)試也沒什么影響鳞陨。
