Flutter詳細的環境配置

什麼是Flutter

Flutter是一款移動應用程序SDK，一份代碼能夠同時生成iOS和Android兩個高性能、高保真的應用程序。

Flutter目標是使開發人員可以交付在不一樣平臺上都感受天然流暢的高性能應用程序。咱們兼容滾動行爲、排版、圖標等方面的差別。

無需移動開發經驗便可開始使用。應用程序是用Dart語言編寫的，若是您使用過Java或JavaScript之類的語言，則該應用程序看起來很熟悉。 使用面嚮對象語言的經驗絕對有幫助，但一些Flutter應用程序甚至是沒有編程經驗的人寫的！

以上是官網的簡單介紹，想了解更多的，可自行去Flutter 官網瞭解。若是想輕鬆理解的，可去Flutter中文網 。

Flutter環境配置

本文主要是Window環境下的配置，其餘環境的配置可參考Flutter 官網，有MAC跟Linux的環境。

Flutter配置環境所需工具

Git

命令提示符或PowerShell

步驟

1. 用git去clone Flutter SDK下來

git clone -b beta https://github.com/flutter/flutter.git
複製代碼

2. 配置好flutter/bin的環境變量
3. 用命令提示符或者PowerShell查看是否須要安裝任何依賴項。

flutter doctor
複製代碼

4. 在Android Studio或者IntelliJ IDEA選擇一種IDE，安裝Flutter插件和Dart插件

5. 結束！！！

這5個步驟真的很簡單，Google每次的新東西都是表面笑嘻嘻...

上述的步驟實際上是我精簡下來，主體就是把上面的步驟執行完就能夠運行了。可是官網文檔在寫的時候會把一些注意項放到另外的位置，或者是藏得有點深。因此會踩到不少坑。下面來講一下，我踩的坑

步驟一出現的坑位

若是大家是去看官網文檔的步驟，你會發現第一步實際上是

git clone -b beta https://github.com/flutter/flutter.git
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
複製代碼

注意： 因爲一些flutter命令須要聯網獲取數據，若是您是在國內訪問，因爲衆所周知的緣由，直接訪問極可能不會成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google爲國內開發者搭建的臨時鏡像。詳情請參考 Using Flutter in China

哇！看到上面的註釋，第一次感受到Google對咱們的照顧。

這裏有兩個坑

一、這個命令是在git命令窗打的（這不是廢話）

因爲本人不是很熟悉命令提示符的全部命令，一開始覺得export是git上(先入爲主)。等到上面命令複製執行完，正常狀況可以拉取到代碼（若是對github網絡有限制的，就會失敗）。

二、export最好不要在git命令窗執行

export實際上是對此次執行指定一個臨時地址，由於flutter不支持在git的命令窗執行。。。（這裏我感到google深深的惡意），在 Using Flutter in China這個網址有詳細的說明，而且有正確的執行順序

步驟三出現的坑

第三步的坑是由第一步的不當操做引發的，第三步的操做須要在命令提示符或者powerShell上執行。這裏的最大的坑是下載各類依賴的網絡問題以及顯示問題。網絡問題無非就是上面的配置是否生效了，多檢查幾下就能確保。顯示的問題就是個很無語的，在下載過程，可能個別項是在正常下載，可是界面會一直卡在那裏，其實後面一直在下載，只是你不知道進度，並且下載速度也很慢。

顯示的問題，我本身的解決方案是，從新打開執行命令，就能夠了。淡淡的憂傷。若是有更好的方案，請告知下。謝謝！

個別狀況下，命令窗會出現符號亂碼，這裏的解決方案是右鍵窗口，點擊屬性，修改字體爲除了點陣字體便可。

步驟一的正確操做

打開git命令窗，執行下面命令，而後關掉，之後都沒它的事了。

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

配置用戶環境變量（這兩個不用系統環境變量）

PUB_HOSTED_URL:https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn

Google還提供另一個鏡像地址（我的體驗還蠻快的）

FLUTTER_STORAGE_BASE_URL: mirrors.sjtug.sjtu.edu.cn/

PUB_HOSTED_URL: <https://dart-pub.mirrors.sjtug.sjtu.edu.cn/

配置系統環境變量Flutter

把你的Flutter\bin的地址添加進去

而後步驟2、步驟三執行下去，最終看到下面的輸出就完成，Flutter的環境配置了

上圖有6個√，其中3項是IDE的，這三個很容易弄，沒啥坑。

第一個√，只要Flutter SDK的各項依賴下載好，基本也就OK了。

第二個√，跟你的Android SDK版本相關，若是你的Android SDK路徑是自定義的路徑的，須要配置一個系統環境變量ANDROID_HOME，值爲SDK的地址。這裏還有另外的問題，就是你的SDK最高版本的包裏面不能爲空，否則第二個√是不經過，不經過會出現下面截圖的問題

解決方案就是把空的文件夾刪除掉，像個人Android-27這個文件夾下實際上是空的。

其實最簡單的是

直接去別人處拷貝一份Flutter SDK 而且是下載好各類依賴項的包

秒好！！！

IDE配置

我這邊使用的是Android Studio，IDE的配置只是安裝兩個插件Flutter跟Dart，通常Dart已經安裝好了，因此只須要安裝好Flutter插件便可。安裝好後，重啓完成。

體驗Flutter的Hello World

File->new->New Flutter Project

按照建立步驟一個一個點下去，第一次建立會有點卡頓，後期Google應該會優化好點，等OK了就點擊Run，第一個Flutter應用程序就行了

不過，這個程序在啓動時候會出現白屏，時間大概有1~2秒，不是很能接受。不過，纔出來也能接受了，畢竟熱重載的功能仍是比較爽的。

好了，本篇Flutter配置到此結束，後面會出一篇更實用的Flutter文章。

附工具下載連接

Git for Windows (Git命令行工具)

若是已安裝Git for Windows，請確保命令提示符或PowerShell中運行 git 命令

PowerShell最好是5.0的版本，才能比較好地支持Flutter。

若是讀者不想用命令提示符的話，使用PowerShell的話，如下有幾點須要注意下

Win 7 自帶的PowerShell 2.0的，win 10自帶的powerShell 5.0 。若是win 7 的讀者想升級版本的話，這裏PowerShell官網下載地址 。