1. 程式人生 > >Flutter學習(一)——搭建開發環境(Windows)

Flutter學習(一)——搭建開發環境(Windows)

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

官網:https://flutter.dev/

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

一、下載Flutter SDK

1、下載

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

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

 2、解壓

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

3、開啟flutter命令列

在Flutter安裝目錄的flutter檔案下找到flutter_console.bat,雙擊執行並啟動flutter命令列,接下來,你就可以在Flutter命令列執行flutter命令了。

二、下載Android Studio

下載安裝就行了,注意一下sdk的路徑,需要配置環境變數。

三、配置編輯器

編輯器我習慣用VS Code,在擴充套件商店搜尋 ‘flutter’,安裝Flutter外掛就可以了。

四、配置環境變數

 1、映象

由於在國內訪問Flutter有時可能會受到限制,Flutter官方為中國開發者搭建了臨時映象,大家可以將如下環境變數加入到使用者環境變數中:

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

2、在Path中新增flutter\bin的全路徑,如下圖:

3、配置ANDROID_HOME,設定為SDK安裝目錄

五、連線裝置

1、真機

手機連線電腦,在開發者選項中,開啟USB除錯,授權計算機訪問裝置。

2、模擬器

這次沒有使用模擬器,之前做RN用過,電腦會比較卡。

 六、建立新應用

  1. 啟動 VS Code
  2. 呼叫 View>Command Palette…
  3. 輸入 ‘flutter’, 然後選擇 ‘Flutter: New Project’ action
  4. 輸入 Project 名稱 (如myapp), 然後按回車鍵
  5. 指定放置專案的位置,然後按藍色的確定按鈕
  6. 等待專案建立繼續,並顯示main.dart檔案

七、執行

1、在flutter命令列中執行 flutter doctor 命令,檢視是否需要安裝任何依賴項來完成安裝。

該命令檢查您的環境並在終端視窗中顯示報告。Dart SDK已經在捆綁在Flutter裡了,沒有必要單獨安裝Dart。 仔細檢查命令列輸出以獲取可能需要安裝的其他軟體或進一步需要執行的任務(以粗體顯示)。

2、確保在VS Code的右下角選擇了目標裝置

3、按 F5 鍵或呼叫Debug>Start Debugging

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

 

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

問題一:

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

解決方法:

1、用記事本開啟bin下面的idea.properties檔案(xxx/android studio/bin/idea.properties);

2、在idea.properties最後一行加上:

disable.android.first.run=true

3、重啟電腦

 

問題二:

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

解決方法:

執行如下命令,然後都選擇y,接受,就可以了

flutter doctor --android-licenses

 

問題三:

在裝置上執行程式失敗,如下圖:

解決方法:

配置ANDROID_HOME環境變數(這裡上面有講到,但是我第一次執行時沒有配置,導致報錯)

 

 END。

&nb