1. 簡介

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，并且Flutter是完全免費、開源的。
Flutter組件采用現代響應式框架構建，這是從React中獲得的靈感，中心思想是用組件(widget)構建UI。 組件描述了在給定其當前配置和狀態時他們顯示的樣子。當組件狀態改變，組件會重構它的描述(description)，Flutter會對比之前的描述， 以確定底層渲染樹從當前狀態轉換到下一個狀態所需要的最小更改。
Flutter的第一個版本被稱為“Sky”，運行在Android操作系統上。1.0版本于2018年12月5日(北京時間)發布。未來預計應用在Google的新操作系統Fuchsia上。

2. Flutter環境搭建

2.1 設置鏡像

在使用Fultter指令時，有些時候會聯網下載依賴資源。在國內通過Flutter訪問網絡有時會不穩定，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變量加入到用戶環境變量中

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

以windows版為例，找到“環境變量”，在“用戶變量”中新建以下兩個環境變量

PUB_HOSTED_URL

FLUTTER_STORAGE_BASE_URL

環境變量

2.2 系統要求

要安裝并運行Flutter，您的開發環境必須滿足以下最低要求:

• 操作系統: Windows 7 或更高版本 (64-bit)
• 磁盤空間: 400 MB (不包括Android Studio的磁盤空間).
• 命令行工具: Git for Windows和Windows Power Shell

如果已安裝Git for Windows，請確保命令提示符或PowerShell中運行 git 命令，不然在后面運行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時需要手動添加C:\Program Files\Git\bin至Path系統環境變量中。如果是32位的Windows系統，請將Program Files換成Program File (X86)

2.3 安裝Flutter SDK

2.3.1 下載Fullter安裝包

在Fultter官網上下載最新可用安裝包，最好使用stable穩定發布版

• Flutter下載頁面
  
  根據操作系統選擇合適的安裝程序
  
  點擊“Windows”進入下載頁面
  
  點擊藍色按鈕進行下載
  
  因為網絡不穩定原因，有時藍色按鈕可能顯示“Fail”，請多次刷新頁面嘗試

• windows系統Flutter安裝包
  
  stable版
  
  因為網絡不穩定原因，有時表格中顯示為“Loading”，請多次刷新頁面嘗試

2.3.2 解壓Fullter安裝包

將下載后的安裝包解壓，路徑中最好不要有中文和空格，不要使用系統中需要高授權的路徑

解壓后的flutter文件夾

2.3.3 配置環境變量

在“環境變量”中“用戶變量”的Path中，追加“flutter\bin”的完整路徑。如果沒有Path可以進行新建

新建Path

或

在已有Path中追加

2.3.4 運行flutter doctor指令檢查依賴

目前只能在命令行提示符(cmd)或Windows Power Shell中執行flutter doctor指令。
第一次運行flutter doctor指令時，它會下載它自己的依賴項并自行編譯，時間可能較長。如果沒有在2.1小節配置flutter的鏡像環境變量，指令可能運行失敗。

依賴檢查

3. Android Studio中Flutter項目環境搭建

3.1 Android SDK

在第2小節中執行flutter doctor指令后發現系統中沒有安裝Android SDK，這時需要安裝它。

3.1.1 Android SDK安裝

訪問官網下載Android SDK，由于網絡不穩定原因，大部分時間無法訪問Android SDK官網，請利用穩定網絡資源進行下載。
注意：安裝路徑上不要有中文和空格

Andriod SDK路徑

如果真機調試程序可以不安裝System Image以節省安裝時間

System Image是虛擬機，如果真機聯調可以不安裝

運行SDK Manager.exe下載Android開發環境，點擊“Install x packages”進行下載安裝

點擊Install進行安裝

選擇“Accept License”并點擊“Install”進行安裝

接收許可并安裝

等待安裝進度完成

等待安裝進度

安裝完成，所選項的status變成“Installed”

安裝完成

配置ANDROID_HOME環境變量
在“環境變量”的“用戶變量”中新建變量“ANDROID_HOME”，將Android SDK的安裝路徑設置為變量的值

ANDROID_HOME環境變量

在“環境變量”的“用戶變量”中的Path中追加路徑

• %ANDROID_HOME%\tools

• %ANDROID_HOME%\platform-tools

  
  
  Path中追加路徑

3.1.2 Flutter中確認Android SDK安裝

打開Windows Power Shell執行指令"flutter doctor"

執行flutter doctor

發現已經獲得到了Android SDK的版本，但提示一個錯誤“Android license status unknown”。其指的是“沒有接受Android的許可”

執行指令"flutter doctor --android-licenses"

• 如果提示多個確認（y/n）,請一直輸入“y”至結束

• 如果提示如下圖

  
  
  錯誤提示

請輸入提示"地址+.bat --update"。
上圖輸入的就是"D:\Android\android-sdk\tools\bin\sdkmanager.bat --update"
此時會提示選擇“y/n”，輸入y后回車確認，可能需要等待一小段時間。

確認license

重新執行指令：”flutter doctor --android-licenses
應該不會再出現“Android license status unknown”錯誤

如果問題仍然存在
可能出現根據下圖所示可能是移除tools文件夾時出現問題

錯誤原因

來到路徑指向的文件夾，將其中tools更改為tool。

更改tools為tool

在Windows Power Shell中執行指令“D:\Android\android-sdk\tool\bin\sdkmanager.bat --update”，等待系統生成新的tools文件夾和其中的內容，這可能會花費一段時間。

生成了新的tools文件夾

在Windows Power Shell中重新執行指令flutter doctor --android-licenses
會提示多次選擇(y/n)的操作，一律輸入"y"

提示確認，輸入y回車

全部確認后，重新執行指令flutter doctor
可以看到錯誤“Android license status unknown”消失。

Andorid SDK通過flutter doctor指令

3.2 Android Studio

3.2.1 下載和安裝Android Studio

訪問Android Studio官網下載Android Studio
Android Studio官網下載地址: https://developer.android.google.cn/studio

點擊下載

下載后正常安裝即可，安裝路徑不要有中文和空格。
檢查Android SDK配置
點擊"Configure"->"Project Defaults"->"Project Structure"

Project Structure

在打開窗口中查看，Android SDK location設置是否正確

Android SDK location設置

依賴檢查
打開Windows Power Shell運行“flutter doctor”檢查依賴，可以看到Android Studio已經安裝，但提示缺少“Flutter”和“Dart”兩個plugin（插件）。

依賴檢查

3.2.2 下載Flutter和Dart插件

打開“Configure”->"Plugins"

打開插件管理

搜索dart，建議先安裝dart插件，再安裝flutter插件。由于網絡不穩定原因，搜索可能會支持一段時間或者提示沒有搜索到結果。請耐心多試幾次。
也可以通過訪問網站下載離線安裝包
http://plugins.jetbrains.com/androidstudio
下載離線安裝包時請確認好IDE與安裝包的版本是否吻合
通過點擊“Get Help”中的“About”來確認版本

確認版本183.5

在網站上選擇合適的版本下載(更細致的版本號請忽略)

版本183.5

下載好離線安裝包后，通過點擊“齒輪”中“Install Plugin from Disk”，選擇下載好的zip文件即可安裝

安裝離線插件

檢查安裝后的插件，確認后重啟Android Studio

image.png

檢查依賴
打開Windows Power Shell，輸入“flutter doctor”檢查依賴。發現插件錯誤也解決了。

檢查依賴

3.3 創建flutter項目和聯機調試

3.3.1 創建flutter項目

安裝Dart和Flutter插件后，重啟Android Studio看到可以創建Flutter工程

創建Flutter工程

點擊“Start a new Flutter project”創建一個Flutter工程
選擇工程類型
第一個是App應用
第二個是插件開發
第三個是Widget（組件）開發
第四個是為Android或IOS的APP提供Module

項目類型

工程名字
選擇第一個App應用開發后，點擊“Next”，填寫工程名字等基本信息

填寫工程名字

package名字
填寫工程名字后，點擊“Next”，填寫package名字

填寫package名字

點擊Finish完成創建，進入編輯頁面

工程目錄結構
main.dart是核心啟動文件

工程目錄結構

3.3.2 聯機調試

工具臺

工具臺說明

真機聯調
通過手機連接USB進行調試，首先要確保在Android SDK Manager中安裝了“Googel USB Driver”

Google USB Driver

通過USB連接手機，在手機上的設置中打開“開發者選項”和其中的“USB調試”。等待計算機安裝手機驅動后，如果工具臺還顯示“<no devices>”，請重啟Android Sutdio

在Widows Power Shell中執行“flutter doctor”，發現沒有問題存在

檢查依賴

執行程序
點擊“執行”

執行程序

運行效果

運行效果

設備連接異常

1. 是否為“文件管理”模式
2. 是否打開了“開發者選項”
3. 是否打開了“USB調試”
4. 是否正確的安裝了的手機驅動
5. 打開cmd，是否能正常執行adb指令，若adb指令提示缺失“api-ms-win-crt-runtimel1-1-0.dll”。在windows7 sp1操作系統中，需要vc環境支持，需要下載vc_redit.exe
   https://www.microsoft.com/zh-cn/download/details.aspx?id=48145

gradle異常
運行時如果
Initializing gradle時出現異常
如

"xxxx\gradlew.bat" exited abnormally (xxxx為路徑)

根據提示的網址下載zip包并放入異常指向的目錄即可
一般目錄為：C:\Users\計算機用戶名\.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv（可能是其他的序列）

adb.exe已停止工作
在使用真機調試的時候碰到了adb.exe 已經停止工作的錯誤。由于adb的默認端口5037，被其他程序占用了。
在cmd中輸入 netstat -ano|findstr "5037"，尋找占用5037端口的PID
在任務管理器中尋找PID為5037的進程，結束進程或卸載相關程序即可。