Flutter 安裝和初體驗
Flutter 安裝指南
關於Flutter的安裝，參考官方文件中的步驟即可。本文以macOS為例，介紹Flutter在macOS上的安裝細節。
官方文件地址： https://flutter.io/get-started/install/
首先，下載Flutter的原始碼，按照官方建議，我們選擇beta分支，如下所示：
git clone -b beta https://github.com/flutter/flutter.git
程式碼下載後，目錄結構如下：
flutter renyugang$ tree -L 2 -d.├── bin│├── cache│└── internal├── dev│├── automated_tests│├── benchmarks│├── bots│├── devicelab│├── docs│├── integration_tests│├── manual_tests│├── missing_dependency_tests│└── tools├── examples│├── catalog│├── flutter_gallery│├── flutter_view│├── hello_world│├── layers│├── platform_channel│├── platform_channel_swift│├── platform_view│└── stocks└── packages├── flutter├── flutter_driver├── flutter_localizations├── flutter_test└── flutter_tools29 directories
接著，為了方便後續使用，需要將專案根目錄下bin路徑加入環境變數PATH中，開啟~/.bash_profile檔案，修改環境變數即可，如下：
# 注意：Users/didi/google/flutter需要替換為你本地Flutter專案的路徑export PATH=$PATH:/Users/didi/google/flutter/bin
務必注意：如果你不能科學上網，那麼在繼續下面的步驟之前，需要做一些額外的事情。宣告PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL兩個環境變數，在當前shell視窗執行如下兩行命令即可，此舉是為了讓Flutter在安裝過程中使用國內的映象。
export PUB_HOSTED_URL= https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn
然後，我們就可以通過 flutter doctor 命令來執行Flutter的安裝程式了，經過一段時間的下載和安裝，Flutter會輸出安裝結果：
flutter renyugang$ flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.11.1 15B42, locale zh-Hans)[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)[!] iOS toolchain - develop for iOS devices (Xcode 7.3.1)✗ Flutter requires a minimum Xcode version of 9.0.0.Download the latest version or update via the Mac App Store.✗ libimobiledevice and ideviceinstaller are not installed. To install, run:brew install --HEAD libimobiledevicebrew install ideviceinstaller✗ ios-deploy not installed. To install:brew install ios-deploy✗ CocoaPods not installed.CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.For more info, see https://flutter.io/platform-pluginsTo install:brew install cocoapodspod setup[✓] Android Studio (version 3.0)[✓] IntelliJ IDEA Community Edition (version 2017.3.1)[✓] Connected devices (1 available)! Doctor found issues in 1 category.
從上面的診斷資訊可以看出如下關鍵資訊：
-
Flutter的版本和渠道
-
Flutter執行所需的Android工具鏈 OK
-
Flutter執行所需的iOS工具鏈 不OK
-
Android Studio和IntelliJ都安裝了，還有一個已連線的手機
如果大家想完善iOS工具鏈，那麼就按照✗號的提示安裝相應工具即可。對於我來說，我本機的xcode版本太低，我需要升級xcode並安裝一堆工具，我就懶得操作了，大家根據需要來吧。
如何執行Flutter程式
執行Flutter程式有兩種方式。
第一種方式，這裡假設有個Flutter程式，它的目錄名為FlutterDemo，那麼我們只需要在FlutterDemo目錄下執行 flutter run 即可，當然必須通過USB連線裝置才可以，這裡可以選擇iOS和Android手機，當然也可以選用模擬器。
第二種執行方式就是通過IDE來執行程式，比如AndroidStudio和IntelliJ的 Run 按鈕。
如何開發Flutter程式
Flutter可以使用如下三個IDE來開發程式
-
Android Studio
-
IntelliJ
-
Visual Studio Code
但是很奇怪，看來Google並沒有打算支援xcode，這或許對iOS使用者不太友好。
對於Android同學來說，肯定是選擇Android Studio或者IntelliJ來開發程式了。本文選擇IntelliJ做演示，其實Android Studio和IntelliJ很類似。
為了使用IntelliJ來開發和除錯Flutter程式，首先需要安裝如下兩個外掛：
-
Flutter外掛：提供程式的執行、除錯和熱過載等功能
-
Dart：提供Dart語言的支援
安裝方式為：選擇Preferences中的Plugins選項，然後搜尋Flutter安裝即可，安裝Flutter外掛會自動安裝Dart外掛，如下：
image
安裝完成後，重啟IntelliJ，就可以通過IntelliJ來新建和開發程式了。
例子展示
為了讓大家更加直觀地瞭解Flutter的執行效果，本文找了一個官方demo並在IntelliJ中開啟並執行，這個例子的路徑位於flutter/examples/flutter_gallery目錄下，使用IntelliJ開啟後如下所示：
image
可以看到，在連線裝置那欄有三個選項，分別是Android手機、iOS模擬器和Android模擬器，這意味著：同一套程式碼，可以在不同的裝置中執行。
在Android手機中的執行效果如下：
