Flutter詳細的環境配置

_CoffeeTime發表於2018-06-28
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
複製程式碼
  1. 配置好flutter/bin的環境變數
  2. 用命令提示符或者PowerShell檢視是否需要安裝任何依賴項。
 flutter doctor
複製程式碼

  1. 在Android Studio或者IntelliJ IDEA選擇一種IDE，安裝Flutter外掛和Dart外掛

  2. 結束！！！

這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對我們的照顧。

這裡有兩個坑

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

由於本人不是很熟悉命令提示符的所有命令，一開始以為export是git上(先入為主)。等到上面命令複製執行完，正常情況能夠拉取到程式碼（如果對github網路有限制的，就會失敗）。

2、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的地址新增進去

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

Flutter配置成功截圖

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

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

第二個√，跟你的Android SDK版本相關，如果你的Android SDK路徑是自定義的路徑的，需要配置一個系統環境變數ANDROID_HOME，值為SDK的地址。這裡還有另外的問題，就是你的SDK最高版本的包裡面不能為空，不然第二個√是不通過，不通過會出現下面截圖的問題

SDK版本不對問題
Android Studio出現無法定位裝置問題

解決方案就是把空的資料夾刪除掉，像我的Android-27這個資料夾下其實是空的。

其實最簡單的是

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

秒好！！！

IDE配置

我這邊使用的是Android Studio，IDE的配置只是安裝兩個外掛Flutter跟Dart，一般Dart已經安裝好了，所以只需要安裝好Flutter外掛即可。安裝好後，重啟完成。

體驗Flutter的Hello World

File->new->New Flutter Project

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

HelloWord

不過，這個程式在啟動時候會出現白屏，時間大概有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官網下載地址 。

相關文章