Flutter快坑我:圖解環境搭建(windows)

Mario西西 發表於 2019-10-15



一、獲取 Flutter SDK


參考:flutter中文社群

(https://flutter.cn/docs/get-started/install/windows)

  • 將壓縮包解壓,然後把其中的 flutter 目錄整個放在你預想的 Flutter SDK 安裝目錄中(比如 D:\flutter;請勿將該目錄放在一些需要額外操作許可權的目錄,比如 C:\Program Files\)。
  • 找到 flutter 目錄中的 flutter_console.bat 檔案,雙擊執行該批處理指令碼Flutter快坑我:圖解環境搭建(windows)

二、更新環境變數

1. 在使用者變數 一欄中,檢查是否有 Path 這個條目:

  • 如果存在,直接把 flutter\bin 目錄的完整路徑以 ; 作為分隔加到已有的值後面。
  • 如果不存在的話,在使用者環境變數中建立一個新的 Path 變數,然後將 flutter\bin 所在的完整路徑作為新變數的值。

Flutter快坑我:圖解環境搭建(windows)


2. 為 Flutter 設定映象配置

  • 參考: 在中國網路環境下使用 Flutter (https://flutter.cn/community/china),強烈建議優先配置這一步
  • 在使用者變數 一欄中,新建使用者環境變數:
    • PUB_HOSTED_URL -> https://pub.flutter-io.cn
    • FLUTTER_STORAGE_BASE_URL -> https://storage.flutter-io.cn

Flutter快坑我:圖解環境搭建(windows)


三、 下載並安裝 Android Studio

準備

    • 新建一個資料夾,比如 D:\android,分別新建androidSDK、androidStudio當做對應的存放路徑

Flutter快坑我:圖解環境搭建(windows)

下載地址:Android Studio

(https://developer.android.google.cn/studio/)

安裝參考:android studio安裝詳解(https://www.jianshu.com/p/de318c8a0fc6)

    • 注意軟體和SDK的安裝路徑請配置成上面第一步準備好的路徑;Flutter快坑我:圖解環境搭建(windows)
    • 這一步左邊的選項請全部勾選Flutter快坑我:圖解環境搭建(windows)


四、安裝 Flutter 和 Dart 外掛

安裝過程如下:

  1. 開啟 Android Studio。

  2. 開啟外掛設定(Windows 系統開啟 File > Settings > Plugins)。

  3. 選擇 Marketplace,然後選擇 Flutter 外掛並點選 安裝。

  4. 當彈出安裝 Dart 外掛提示時,點選 Yes。

  5. 當彈出重新啟動提示時,點選 Restart。Flutter快坑我:圖解環境搭建(windows)

五、檢查安裝環境

1. androidSDK路徑

Flutter快坑我:圖解環境搭建(windows)

2. dartSDK路徑

3. flutterSDK路徑

Flutter快坑我:圖解環境搭建(windows)

4. 檢查之前配置的使用者環境變數是否生效

5. 執行 flutter doctor

  1. 開啟一個新的控制檯視窗,然後輸入flutter doctor執行。如果它提示有任何的平臺相關依賴,那麼你就需要按照指示完成這些配置;比如:Flutter快坑我:圖解環境搭建(windows)上述錯誤如果在安裝完成AS以及檢查了以上配置後任然存在,可能是flutter的配置不正確,解決方法:
  • 啟動Flutter目錄下的flutter_console.bat,執行下面的命令
  • flutter config --android-sdk=" /path/to/android/sdk "(androidSDK路徑)
  • flutter config --android-studio-dir=" /path/to/android/studio "(AS路徑)
  • 如果是一下提示,就基本沒有問題了Flutter快坑我:圖解環境搭建(windows)
  • 六、建立應用

    1. 選擇 Flutter 應用程式 作為專案型別,然後點 下一步Flutter快坑我:圖解環境搭建(windows)

    2. 選擇 Flutter 應用程式 作為專案型別,然後點 下一步Flutter快坑我:圖解環境搭建(windows)

    3. 輸入專案名稱(比如 ‘myapp’)確認 Flutter SDK 路徑 區域所示路徑是正確的 SDK 路徑。就是之前下載好的flutterSDKFlutter快坑我:圖解環境搭建(windows)

    4. 點選 完成。Flutter快坑我:圖解環境搭建(windows)

    七、執行專案

    準備:確保Virtualization Technology (VTx)和Virtualization Technology for Directed I/O (VTd)已經開啟,沒有的話,參照下面步驟,否則無法連線虛擬或者真實手機裝置

    • 開機時不斷點選F10鍵進入BIOS,選擇Advanced(高階)然後選擇System Options(系統選項),點選回車
    • 然後選擇Virtualization Technology (VTx)和Virtualization Technology for Directed I/O (VTd)勾選,點選save(儲存),退出即可

    可以選擇虛擬裝置或者用USB連線真實裝置,手機必須開啟USB除錯

    Flutter快坑我:圖解環境搭建(windows)


    坑坑坑坑坑坑坑坑坑坑坑坑!!!


    1. 點選啟動除錯的時候,提示:

    No connected devices found; please connect a device, or see flutter.io/setup

    解決:

    • 確保 五、檢查安裝環境都正確
    • 確保BIOS下VTx和VTd已經開啟
    • 確保以管理員身份開啟Android studio
    • 如果是連線真機,請確保USB除錯、USB安裝都已經開啟


    2. flutter doctor檢查報錯

    Flutter快坑我:圖解環境搭建(windows)

    解決:

    啟動Flutter目錄下的flutter_console.bat,執行下面的命令

    flutter config --android-sdk=" /path/to/android/sdk "(androidSDK路徑)

    flutter config --android-studio-dir=" /path/to/android/studio "(AS路徑)

    Flutter快坑我:圖解環境搭建(windows)


    3. Android studio建立模擬器報錯“Enable VT-x in your Bios Security Settings”

    • 開機時不斷點選F10鍵進入BIOS,選擇Advanced(高階)然後選擇System Options(系統選項),點選回車
    • 然後選擇Virtualization Technology (VTx)和Virtualization Technology for Directed I/O (VTd)勾選,點選save(儲存),退出即可



    4. 第一次執行 會卡在 Resovle ...中很長時間,然後就會報錯。

    Finished with error: ProcessException: Process "E:\code\flutter_app" exited abnormally: Downloading https://services.gradle.org/distributions/gradle-4.10.2-all.zip Unzipping

    問題原因:flutter 需要梯子在jcenter和google庫裡下載依賴,因為google被牆訪問不到,所以會在那裡一直處於下載狀態,但又下載不了。


    辦法一: 參考 2. 為 Flutter 設定映象配置

    辦法二:

    maven{ url 'https://maven.aliyun.com/repository/google' }

    maven{ url 'https://maven.aliyun.com/repository/jcenter' }

    maven{url 'http://maven.aliyun.com/nexus/content/groups/public'}

    •  需要再你app 裡的build.gradle 的兩個地方加 阿里雲的映象Flutter快坑我:圖解環境搭建(windows)
    • 需要在你flutter sdk 的 如下路徑 下的 flutter.gradle 也同樣新增映象。 這裡是我的Flutter SDK .gradle路徑 開啟後新增的映象 

    Flutter快坑我:圖解環境搭建(windows)



    5. 卡在:Installing build\app\outputs\apk\app.apk..., 無法熱更新程式碼

    Flutter快坑我:圖解環境搭建(windows)

    解決: 

    • 確保 五、檢查安裝環境都正確
    • 確保有管理員許可權且管理員身份開啟Android studio
    • 如果是連線真機,請確保USB除錯、USB安裝都已經開啟