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

在 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 變量值輸入 //pub.flutter-io.cn 然後點擊確定
2020_10_07_input_pub
繼續點擊 新建
變量名輸入FLUTTER_STORAGE_BASE_URL 變量值輸入 //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