Flutter學習（一）——搭建開發環境（Windows）

久聞 Flutter 大名，今天終於有時間體驗一下了 ٩(๑>◡<๑)۶ 

官網：https://flutter.dev/

中文官網：https://flutterchina.club/

一、下載Flutter SDK

一、下載

①官網下載：https://flutter.dev/docs/development/tools/sdk/releases#windows

②github下載：https://github.com/flutter/flutter/releases

 二、解壓

將安裝包zip解壓到你想安裝Flutter SDK的路徑。

三、打開flutter命令行

在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行並啓動flutter命令行，接下來，你就能夠在Flutter命令行運行flutter命令了。

2、下載Android Studio

下載安裝就好了，注意一下sdk的路徑，須要配置環境變量。

3、配置編輯器

編輯器我習慣用VS Code，在擴展商店搜索 ‘flutter’，安裝Flutter插件就能夠了。

4、配置環境變量

 一、鏡像

因爲在國內訪問Flutter有時可能會受到限制，Flutter官方爲中國開發者搭建了臨時鏡像，你們能夠將以下環境變量加入到用戶環境變量中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

二、在Path中添加flutter\bin的全路徑，以下圖：

三、配置ANDROID_HOME，設置爲SDK安裝目錄

5、鏈接設備

一、真機

手機鏈接電腦，在開發者選項中，打開USB調試，受權計算機訪問設備。

二、模擬器

此次沒有使用模擬器，以前作RN用過，電腦會比較卡。

 6、建立新應用

1. 啓動 VS Code
2. 調用 View>Command Palette…
3. 輸入 ‘flutter’, 而後選擇 ‘Flutter: New Project’ action
4. 輸入 Project 名稱 (如myapp), 而後按回車鍵
5. 指定放置項目的位置，而後按藍色的肯定按鈕
6. 等待項目建立繼續，並顯示main.dart文件

7、運行

一、在flutter命令行中運行 flutter doctor 命令，查看是否須要安裝任何依賴項來完成安裝。

該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能須要安裝的其餘軟件或進一步須要執行的任務（以粗體顯示）。

二、確保在VS Code的右下角選擇了目標設備

三、按 F5 鍵或調用Debug>Start Debugging

　　安裝成功即會在手機上看到以下應用程序。

 

下面是遇到的一些問題------------------------------

問題一：

安裝Android studio時出現unable to access android sdk add-on list

解決方法：

一、用記事本打開bin下面的idea.properties文件（xxx/android studio/bin/idea.properties）；

二、在idea.properties最後一行加上：

disable.android.first.run=true

三、重啓電腦

 

問題二：

安裝Android studio後，用flutter doctor檢測，發現Android licenses not accepted

解決方法：

運行以下命令，而後都選擇y，接受，就能夠了

flutter doctor --android-licenses

 

問題三：

在設備上運行程序失敗，以下圖：

解決方法：

配置ANDROID_HOME環境變量（這裏上面有講到，可是我第一次運行時沒有配置，致使報錯）

 

 END。