# 安裝Flutter 工欲善其事必先利其器，本節首先會分別介紹一下在Windows和macOS下Flutter SDK的安裝，然后再介紹一下配IDE和模擬器的使用。 ## 搭建Flutter開發環境 由于Flutter會同時構建Android和IOS兩個平臺的發布包，所以Flutter同時依賴Android SDK和iOS SDK，在安裝Flutter時也需要安裝相應平臺的構建工具和SDK。下面我們分別介紹一下Windows和macOS下的環境搭建。 ### 使用鏡像 由于在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變量加入到用戶環境變量中： ``` export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn ``` **注意：** 此鏡像為臨時鏡像，并不能保證一直可用，讀者可以參考<https://flutter.io/community/china> 以獲得有關鏡像服務器的最新動態。 ### 在Windows上搭建Flutter開發環境 #### 系統要求 要安裝并運行Flutter，您的開發環境必須滿足以下最低要求: - 操作系統: Windows 7 或更高版本 (64-bit) - 磁盤空間: 400 MB (不包括Android Studio的磁盤空間). - 工具: Flutter 依賴下面這些命令行工具. - [PowerShell 5.0](https://docs.microsoft.com/en-us/powershell/scripting/setup/installing-windows-powershell#upgrading-existing-windows-powershell) 或更新的版本 - [Git for Windows](https://git-scm.com/download/win) (Git命令行工具)； 如果已安裝Git for Windows，請確保可以在命令提示符或PowerShell中運行 git 命令 #### 獲取Flutter SDK 1. 去flutter官網下載其最新可用的安裝包，官網地址：<https://flutter.io/sdk-archive/#windows>  注意，Flutter的渠道版本會不停變動，請以Flutter官網為準。另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻，讀者也可以去Flutter github項目下去下載安裝包，地址：<https://github.com/flutter/flutter/releases> 。 1. 將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：`C:\src\flutter`；注意，**不要**將flutter安裝到需要一些高權限的路徑如`C:\Program Files\`）。 2. 在Flutter安裝目錄的`flutter`文件下找到`flutter_console.bat`，雙擊運行并啟動**flutter命令行**，接下來，你就可以在Flutter命令行運行flutter命令了。 ##### 更新環境變量 如果你想在Windows系統自帶命令行（而不是）運行flutter命令，需要添加以下環境變量到用戶PATH： - 轉到 “控制面板>用戶帳戶>用戶帳戶>更改我的環境變量” - 在“用戶變量”下檢查是否有名為“Path”的條目: - 如果該條目存在， 追加 flutter\\bin的全路徑，使用 ; 作為分隔符. - 如果該條目不存在，創建一個新用戶變量 Path ，然后將 `flutter\bin` 的全路徑作為它的值. 重啟Windows以應用此更改. ##### 運行 flutter doctor命令 在Flutter命令行運行如下命令來查看是否還需要安裝其它依賴，如果需要，安裝它們： ``` flutter doctor ``` 該命令檢查你的環境并在命令行窗口中顯示報告。Dart SDK已經在打包在Flutter SDK里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務。 例如： ``` [-] Android toolchain - develop for Android devices ? Android SDK at D:\Android\sdk ? Android SDK is missing command line tools; download from https://goo.gl/XxQghQ ? Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions. ``` 第一次運行flutter命令（如`flutter doctor`）時，它會下載它自己的依賴項并自行編譯。以后再運行就會快得多。缺失的依賴需要安裝一下，安裝完成后再運行`flutter doctor`命令來驗證是否安裝成功。 #### Android設置 Flutter依賴于Android Studio的全量安裝。Android Studio不僅可以管理Android 平臺依賴、SDK版本等，而且它也是Flutter開發推薦的IDE之一（當然，你也可以使用其它編輯器或IDE，我們將會在后面討論）。 ##### 安裝Android Studio 1. 下載并安裝 Android Studio，下載地址：<https://developer.android.com/studio/index.html> 。 2. 啟動Android Studio，然后執行“Android Studio安裝向導”。這將安裝最新的Android SDK、Android SDK平臺工具和Android SDK構建工具，這些是用Flutter進行Android開發所需要的。 #### 安裝遇到問題？ 如果在安裝過程中遇到問題，可以先去flutter官網查看一下安裝方式是否發生變化，或者在網上搜索一下解決方案。 ### 在macOS上搭建Flutter開發環境 在masOS下可以同時進行Android和iOS設備的測試。 #### 系統要求 要安裝并運行Flutter，您的開發環境必須滿足以下最低要求: - 操作系統: macOS (64-bit) - 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）. - 工具: Flutter 依賴下面這些命令行工具. - `bash、mkdir、rm、git、curl、unzip、which` #### 獲取Flutter SDK 1. 去flutter官網下載其最新可用的安裝包，官網地址：<https://flutter.io/sdk-archive/#macos> 注意，Flutter的渠道版本會不停變動，請以Flutter官網為準。另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻，讀者也可以去Flutter github項目下去下載安裝包，地址：<https://github.com/flutter/flutter/releases> 。 2. 解壓安裝包到你想安裝的目錄，如： ``` cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip ``` 3. 添加`flutter`相關工具到path中： ``` export PATH=`pwd`/flutter/bin:$PATH ``` 此代碼只能暫時針對當前命令行窗口設置PATH環境變量，要想永久將Flutter添加到PATH中請參考下面**更新環境變量** 部分。 ##### 運行 flutter doctor命令 這一步和Windows下步驟一致，不再贅述。 ##### 更新環境變量 將Flutter添加到PATH中，可以在任何終端會話中運行`flutter`命令。 對于所有終端會話永久修改此變量的步驟是和特定計算機系統相關的。通常，您會在打開新窗口時將設置環境變量的命令添加到執行的文件中。例如 1. 確定您Flutter SDK的目錄記為“FLUTTER\_INSTALL\_PATH”，您將在步驟3中用到。 2. 打開(或創建) `$HOME/.bash_profile`。文件路徑和文件名可能在你的電腦上不同. 3. 添加以下路徑: ``` export PATH=[FLUTTER_INSTALL_PATH]/flutter/bin:$PATH ``` 例如筆者Flutter 安裝目錄是“~/code/flutter\_dir”，那么代碼為： ``` export PATH=~/code/flutter_dir/flutter/bin:$PATH ``` 4. 運行 `source $HOME/.bash_profile` 刷新當前終端窗口。 > **注意:** 如果你使用終端是zsh，終端啟動時 `~/.bash_profile` 將不會被加載，解決辦法就是修改 `～/.zshrc` ，在其中添加：source ～/.bash\_profile 5. 驗證“flutter/bin”是否已在PATH中： ``` echo $PATH ``` #### 安裝 Xcode 要為iOS開發Flutter應用程序，您需要Xcode 9.0或更高版本: 1. 安裝Xcode 9.0或更新版本(通過[鏈接下載](https://developer.apple.com/xcode/)或[蘋果應用商店](https://itunes.apple.com/us/app/xcode/id497799835)). 2. 配置Xcode命令行工具以使用新安裝的Xcode版本 `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` 對于大多數情況，當您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應路徑。 3. 確保Xcode許可協議是通過打開一次Xcode或通過命令`sudo xcodebuild -license`同意過了. 使用Xcode，您可以在iOS設備或模擬器上運行Flutter應用程序。 #### 安裝Android Studio 和Window一樣，要在Android設備上構建并運行Flutter程序都需要先安裝Android Studio，讀者可以先自行下載并安裝Android Studio，在此不再贅述。 ### 升級 Flutter #### Flutter SDK分支 Flutter SDK有多個分支，如beta、dev、master、stable，其中stable分支為穩定分支（日后有新的穩定版本發布后可能也會有新的穩定分支，如1.0.0），dev和master為開發分支，安裝flutter后，你可以運行`flutter channel`查看所有分支，如筆者本地運行后，結果如下： ``` Flutter channels: beta dev * master ``` 帶"\*"號的分支即你本地的Flutter SDK 跟蹤的分支，要切換分支，可以使用`flutter channel beta` 或 `flutter channel master`，Flutter官方建議跟蹤穩定分支，但你也可以跟蹤`master`分支，這樣可以查看最新的變化，但這樣穩定性要低的多。 #### 升級Flutter SDK和依賴包 要升級flutter sdk，只需一句命令： ``` flutter upgrade ``` 該命令會同時更新Flutter SDK和你的flutter項目依賴包。如果你只想更新項目依賴包（不包括Flutter SDK），可以使用如下命令： - `flutter packages get`獲取項目所有的依賴包。 - `flutter packages upgrade` 獲取項目所有依賴包的最新版本。 #### ## IDE配置與使用 理論上可以使用任何文本編輯器與命令行工具來構建Flutter應用程序。 不過，Flutter官方建議使用Android Studio和VS Code之一以獲得更好的開發體驗。Flutter官方提供了這兩款編輯器插件，通過IDE和插件可獲得代碼補全、語法高亮、widget編輯輔助、運行和調試支持等功能，可以幫助我們極大的提高開發效率。下面我們分別介紹一下Android Studio和VS Code的配置及使用（Android Studio和VS Code讀者可以在其官網獲得最新的安裝，由于安裝比較簡單，故不再贅述）。 ### Android Studio 配置與使用 由于Android Studio是基于IntelliJ IDEA開發的，所以讀者也可以使用IntelliJ IDEA。 #### 安裝Flutter和Dart插件 需要安裝兩個插件: - `Flutter`插件： 支持Flutter開發工作流 (運行、調試、熱重載等)。 - `Dart`插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等)。 安裝步驟： 1. 啟動Android Studio。 2. 打開插件首選項 (macOS：**Preferences>Plugins**, Windows：**File>Settings>Plugins**)。 3. 選擇 **Browse repositories…**，選擇 flutter 插件并點擊 `install`。 4. 重啟Android Studio后插件生效。 接下來，讓我們用Android Studio創建一個Flutter項目，然后運行它，并體驗“熱重載”。 #### 創建Flutter應用 1. 選擇 **File>New Flutter Project** 。 2. 選擇 **Flutter application** 作為 project 類型, 然后點擊 Next。 3. 輸入項目名稱 (如 `myapp`)，然后點擊 Next。 4. 點擊 **Finish**。 5. 等待Android Studio安裝SDK并創建項目。 上述命令創建一個Flutter項目，項目名為myapp，其中包含一個使用[Material 組件](https://material.io/guidelines/)的簡單演示應用程序。 在項目目錄中，您應用程序的代碼位于 `lib/main.dart`。 #### 運行應用程序 1. 定位到Android Studio工具欄：  2. 在 **target selector** 中, 選擇一個運行該應用的Android設備。如果沒有列出可用，請選擇 **Tools>Android>AVD Manager** 并在那里創建一個。 3. 在工具欄中點擊 **Run圖標**。 4. 如果一切正常, 您應該在您的設備或模擬器上會看到啟動的應用程序：  #### 體驗熱重載 Flutter 可以通過 *熱重載（hot reload）* 實現快速的開發周期，熱重載就是無需重啟應用程序就能實時加載修改后的代碼，并且不會丟失狀態。簡單的對代碼進行更改，然后告訴IDE或命令行工具你需要重新加載（點擊reload按鈕），你就會在你的設備或模擬器上看到更改。 ``` 1. 打開`lib/main.dart`文件 2. 將字符串 `'You have pushed the button this many times:'` 更改為 `'You have clicked the button this many times:'` 3. 不要按“停止”按鈕; 讓您的應用繼續運行. 4. 要查更改，請調用 **Save** (`cmd-s` / `ctrl-s`)，或者點擊 **熱重載按鈕** (帶有閃電??圖標的按鈕)。 ``` 你會立即在運行的應用程序中看到更新的字符串。 ### VS Code的配置與使用 VS Code是一個輕量級編輯器，支持Flutter運行和調試。 #### 安裝flutter插件 1. 啟動 VS Code。 2. 調用 **View>Command Palette…**。 3. 輸入 ‘install’, 然后選擇 **Extensions: Install Extension** action。 4. 在搜索框輸入 `flutter` ，在搜索結果列表中選擇 ‘Flutter’, 然后點擊 **Install**。 5. 選擇 ‘OK’ 重新啟動 VS Code。 6. 驗證配置 - 調用 **View>Command Palette…** - 輸入 ‘doctor’, 然后選擇 **‘Flutter: Run Flutter Doctor’** action。 - 查看“OUTPUT”窗口中的輸出是否有問題 #### 創建Flutter應用 1. 啟動 VS Code 2. 調用 **View>Command Palette…** 3. 輸入 ‘flutter’, 然后選擇 **‘Flutter: New Project’** action 4. 輸入 Project 名稱 (如`myapp`), 然后按回車鍵 5. 指定放置項目的位置，然后按藍色的確定按鈕 6. 等待項目創建繼續，并顯示main.dart文件 #### 體驗熱重載 1. 打開`lib/main.dart`文件。 2. 將字符串 `'You have pushed the button this many times:'` 更改為 `'You have clicked the button this many times:'`。 3. 不要按“停止”按鈕; 讓您的應用繼續運行。 4. 要查看您的更改，請調用 **Save** (`cmd-s` / `ctrl-s`), 或者點擊 **熱重載按鈕** (綠色圓形箭頭按鈕)。 你會立即在運行的應用程序中看到更新的字符串。 ## 連接設備運行Flutter應用 Window下只支持為Android設備構建并運行Flutter應用，而macOS同時支持iOS和Android設備。下面分別介紹如何連接Android和iOS設備來運行flutter應用。 ### 連接Android模擬器 要準備在Android模擬器上運行并測試Flutter應用，請按照以下步驟操作： 1. 啟動 **Android Studio>Tools>Android>AVD Manager** 并選擇 **Create Virtual Device**. 2. 選擇一個設備并選擇 **Next**。 3. 為要模擬的Android版本選擇一個或多個系統印象，然后選擇 **Next**. 建議使用 *x86* 或 *x86\_64* image . 4. 在 “Emulated Performance”下, 選擇 **Hardware - GLES 2.0** 以啟用 [硬件加速](https://developer.android.com/studio/run/emulator-acceleration.html). 5. 驗證AVD配置是否正確，然后選擇 **Finish**。 有關上述步驟的詳細信息，請參閱 [Managing AVDs](https://developer.android.com/studio/run/managing-avds.html). 6. 在“Android Virtual Device Manager”中，點擊工具欄的 **Run**。模擬器啟動并顯示所選操作系統版本或設備的啟動畫面。 7. 運行 `flutter run` 啟動您的設備。 連接的設備名是 `Android SDK built for <platform>`，其中 *platform* 是芯片系列，如 x86。 ### 連接Android真機設備 要準備在Android設備上運行并測試Flutter應用，需要Android 4.1（API level 16）或更高版本的Android設備. 1. 在Android設備上啟用 **開發人員選項** 和 **USB調試** 。詳細說明可在[Android文檔](https://developer.android.com/studio/debug/dev-options.html)中找到。 2. 使用USB將手機插入電腦。如果設備出現調試授權提示，請授權你的電腦可以訪問該設備。 3. 在命令行運行 `flutter devices` 命令以驗證Flutter識別您連接的Android設備。 4. 運行啟動你應用程序 `flutter run`。 默認情況下，Flutter使用的Android SDK版本是基于你的 `adb` 工具版本。 如果想讓Flutter使用不同版本的Android SDK，則必須將該 `ANDROID_HOME` 環境變量設置為相應的SDK安裝目錄。 ### 連接iOS模擬器 要準備在iOS模擬器上運行并測試Flutter應用，請按以下步驟操作： 1. 在你的MAC上，通過 Spotlight 或以下命令找到模擬器： ``` open -a Simulator ``` 2. 通過檢查模擬器 **Hardware > Device** 菜單中的設置，確保模擬器正在使用64位設備（iPhone 5s或更高版本）。 3. 根據你電腦屏幕大小，模擬高清屏iOS設備可能會溢出屏幕。可以在模擬器的 **Window> Scale** 菜單下設置設備比例。 4. 運行 `flutter run`啟動flutter應用程序。 ### 連接iOS真機設備 要將Flutter應用安裝到iOS真機設備，需要一些額外的工具和一個Apple帳戶，還需要在Xcode中進行一些設置。 1. 安裝 [homebrew](http://brew.sh/) （如果已經安裝了brew,跳過此步驟）。 2. 打開終端并運行如下這些命令: ``` brew update brew install --HEAD libimobiledevice brew install ideviceinstaller ios-deploy cocoapods pod setup ``` 如果這些命令中的任何一個失敗并出現錯誤，請運行brew doctor并按照說明解決問題. 3. 遵循Xcode簽名流程來配置您的項目: - 在你Flutter項目目錄中通過 `open ios/Runner.xcworkspace` 打開默認的Xcode workspace. - 在Xcode中，選擇導航面板左側中的`Runner`項目。 - 在`Runner` target設置頁面中，確保在 **General > Signing > Team** 下選擇了你的開發團隊。當你選擇一個團隊時，Xcode會創建并下載開發證書，向你的設備注冊你的帳戶，并創建和下載配置文件（如果需要）。 - 要開始您的第一個iOS開發項目，您可能需要使用您的Apple ID登錄Xcode。  任何Apple ID都支持開發和測試，但若想將應用分發到App Store，就必須注冊Apple開發者計劃，有關詳情讀者可以自行了解。 - 當您第一次attach真機設備進行iOS開發時，需要同時信任你的Mac和該設備上的開發證書。首次將iOS設備連接到Mac時，請在對話框中選擇 `Trust`。  然后，轉到iOS設備上的**設置**菜單，選擇 **常規>設備管理** 并信任您的證書。 - 如果Xcode中的自動簽名失敗，請驗證項目的 **General > Identity > Bundle Identifier** 值是否唯一.  - 運行 `flutter run`啟動flutter應用程序。