【Flutter 1-2】在 Windows 10下安裝Flutter+Dart+Android Studio 配置Flutter開發環境

弗拉德發表於2020-10-26

在 Windows 10下安裝Flutter+Dart+Android Studio 配置Flutter開發環境

文章首發地址

配置環境變數

由於部分網站被牆的原因,我們需要先配置Flutter國內映象地址,這兩個地址是由Flutter官方維護的,可以放心使用
首先我們找到此電腦點選右鍵,然後點選屬性
2020_10_07_my_computer

然後點選高階系統設定
2020_10_07_heigh_setting

點選高階然後找到下面的環境變數並點選
2020_10_07_huanjingbianliang
點選新建
2020_10_07_xinjian
變數名輸入PUB_HOSTED_URL 變數值輸入 https://pub.flutter-io.cn 然後點選確定
2020_10_07_input_pub
繼續點選 新建
變數名輸入FLUTTER_STORAGE_BASE_URL 變數值輸入 https://storage.flutter-io.cn 然後點選確定
2020_10_07_input_storage
到這裡需要的環境變數就配置完成了

開始安裝Flutter
  • 下載安裝檔案並解壓縮
    點選進入官網下載需要的版本
    如果不能開啟該網站,可去我的網盤去取版本是1.22.0 提取碼: awjy
    下載完成後在新建一個資料夾解壓縮,我這裡選的是C:\src\flutter
    解壓成功之後,我們需要將Flutter也配置到環境變數中,flutter資料夾下的bin目錄路徑(我這裡是C:\src\flutter\bin)配置到環境變數中。開啟配置環境變數的步驟參考 上面的步驟配置環境變數
    雙擊Path來新增
    2020_10_07_find_pth
    C:\src\flutter\bin配置進去
    2020_10_07_flutter_path

  • 執行 flutter doctor
    將路徑配置之後我們開啟 終端工具PowerShell 輸入 flutter doctor檢視還有哪些需要配置。flutter doctor是Flutter官方提供的用來檢測當前Flutter配置環境的工具,可以快速的幫我們發現問題。
    執行之後我們會看到輸出如下:
    2020_10_07_flutter_doctor_1

很明顯我們還需要安裝 Android Studio,Andriod Studio是Flutter官方支援的IDE工具。
去Andriod Studio 官網下載下載完成後,一路Next安裝完成,然後啟動Android Studio,第一次安裝預設會安裝很多依賴,這個等慢慢安裝就可以了。
啟動之後點選File->Settings
2020_10_07_android_studio_settings

找到Plugins在輸入框內輸入Flutter點選安裝
2020_10_07_andriod_studio_install_flutter
安裝Flutter的時候預設會要求安裝Dart
2020_10_07_android_studio_install_dart
安裝後重啟 Andriod Studio

然後我們把Android SDK路徑配置到系統變數裡面
我們先找到File->Other Settings->Default Project Structure..並點選
2020_10_07_android_sdk
找到SDK的路徑
2020_10_07_android_sdk_path
進入到檔案下找到SDK資料夾有一個platform-tools的資料夾,複製這個路徑新增到系統Path
變數名是ANDROID_HOME
2020_10_07_adroid_home

這時候我們再執行一次 flutter doctor
2020_10_07_doctor_error
現在我們只需要再執行一次 flutter doctor --android-licenses 彈出的提示選擇y或者是直接回車即可。
然後再執行一次flutter doctor已經沒有錯誤提示了。
這樣我們的Flutter的環境就配置完成了。

安裝Android 模擬器

開啟Android Studio 找到右上角的AVD Manager並點選
2020_10_07_android_studio_avd_manager

點選Create Virtual Device... 選擇一個我們需要需要安裝的模擬器,然後點選Next
2020_10_07_select_device
在配置頁面選擇Hardware - GLES 2.0
2020_10_07_hardware_gles

新建Flutter專案並執行

點選Android Studio 裡面的 File->New->New Flutter Project
新建專案並開啟
選擇我們剛剛安裝好的模擬器,並且點選執行 就可以看到效果啦!
2020_10_07_runing

可能會遇到的問題

在執行 flutter doctor --android-licenses出現以下錯誤
2020_10_07_fluuter_sdk_error
需要我們手動安裝Android SDK Platform-Tools
開啟Android Studio 點選File->Settings->Android SDK找到Android SDK Platform-Tools安裝即可!
2020_10_07_error_platform_tools

相關文章