前言

這是我第一次學(xué)習(xí)使用Flutter，主要還是按照文檔來安裝使用Flutter，以下安裝是基于我當(dāng)前的環(huán)境配置來進(jìn)行的：Mac OS、VSCode編輯器、Xcode模擬器。官方文檔基本寫的很清楚，一路下來沒遇到問題，這里只是自己簡單做一下記錄，簡化了一下文檔。

安裝 Flutter

下載Flutter并設(shè)置環(huán)境變量

1.clone Flutter的beta倉庫到當(dāng)前的系統(tǒng)路徑中：

git clone -b beta https://github.com/flutter/flutter.git

2.在你的~/.bash_profile或～/.zshrc添加鏡像和路徑的環(huán)境變量配置：

//前兩個是鏡像地址，后面的`/flutter/bin:$PATH`是你clone的倉庫地址，這里默認(rèn)就是在你當(dāng)前的系統(tǒng)路徑中
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=`pwd`/flutter/bin:$PATH

3.配置好之后，在終端中重啟配置：

source ~/.bash_profile
或
source ~/.zshrc

4.重啟成功之后，echo $PATH就能看到配置的路徑

運(yùn)行 flutter doctor

運(yùn)行以下命令查看是否需要安裝其它依賴項(xiàng)來完成安裝：

flutter doctor

該命令檢查您的環(huán)境并在終端窗口中顯示報告。Dart SDK已經(jīng)在捆綁在Flutter里了，沒有必要單獨(dú)安裝Dart。 仔細(xì)檢查命令行輸出以獲取可能需要安裝的其他軟件或進(jìn)一步需要執(zhí)行的任務(wù)

比如以下是我運(yùn)行flutter doctor的一些提示，包括一些版本的升級等：

Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices
    ? Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ? libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ? ios-deploy not installed. To install:
        brew install ios-deploy
    ! CocoaPods out of date (1.5.0 is recommended).
        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-plugins
      To upgrade:
        brew upgrade cocoapods
        pod setup
[?] Android Studio (not installed)
[!] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.

編輯器插件安裝

我使用的是VS Code，所以這里就介紹VS Code的插件安裝：

安裝 VS Code

VS Code, 安裝1.20.1或更高版本.

安裝 Dart Code 插件

1. 啟動 VS Code
2. 調(diào)用 View>Command Palette…
3. 輸入 ‘install’, 然后選擇 Extensions: Install Extension action
4. 在搜索框輸入 dart code , 在搜索結(jié)果列表中選擇 ‘Dart Code’, 然后點(diǎn)擊 Install
5. 重新啟動 VS Code

通過Flutter Doctor驗(yàn)證您的設(shè)置

1. 調(diào)用 View>Command Palette…
2. 輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action（這時IDE可能會找不到PATH路徑，直接在提示里選擇你clone flutter時候的目錄）
3. 查看“OUTPUT”窗口中的輸出是否有問題

體驗(yàn)Flutter

創(chuàng)建項(xiàng)目

1. 啟動 VS Code
2. 調(diào)用 View>Command Palette…
3. 輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
4. 輸入 Project 名稱 (如hello_world), 然后按回車鍵
5. 指定放置項(xiàng)目的位置，然后按藍(lán)色的確定按鈕
6. 等待項(xiàng)目創(chuàng)建繼續(xù)，并顯示main.dart文件

上述命令創(chuàng)建一個Flutter項(xiàng)目，項(xiàng)目名為hello_world，其中包含一個使用Material 組件的簡單的演示應(yīng)用程序。

在項(xiàng)目目錄中，您的應(yīng)用程序的代碼位于 lib/main.dart.

運(yùn)行應(yīng)用程序

1. 確保在VS Code的右下角選擇了目標(biāo)設(shè)備（如果你沒有連接設(shè)備的話，會默認(rèn)選擇最新的模擬器，比如我這里打開的是iPhone X，但是如果我提前自己打開了iphone 8的模擬器，則會運(yùn)行在iphone 8上面）
2. 按 F5 鍵或調(diào)用Debug>Start Debugging
3. 等待應(yīng)用程序啟動
4. 如果一切正常，在應(yīng)用程序建成功后，您應(yīng)該在您的設(shè)備或模擬器上看到應(yīng)用程序

體驗(yàn)熱更新

熱更新就是你不用重新運(yùn)行程序就能實(shí)時加載修改后的程序，在Flutter里熱更新十分方便，比如在我們新建的程序里lib/main.dart文件修改里面的文案，然后保存（cmd-s / ctrl-s），你就能馬上實(shí)時看到模擬器上的文案修改。

參考

Flutter中文文檔
Flutter英文文檔