w7上使用VSCode配置Flutter開發環境(脫離Android Studio安裝)

前言

想做一款app,看最近Flutter比較火,想拿來嘗試一下。
沒有過安卓開發的經驗,之前一直做得是Web前端,這裏將邊學邊記錄自己從零開始的過程,堅持持續更新。
有不當之處,望大神們不嗇賜教。

配置環境

基於Windows7上使用VSCode來配置Flutter。

需要配置的資源

JDK、Android SDK、Flutter SDK、VSCode。
下面就分享一下對這四個資源的配置,整個開發環境搭建完成後,熱加載的體驗,完成了這些就可以正式進入開發了。

JDK安裝與環境變量配置

下載資源地址:https://www.oracle.com/techne...

  1. 下載後按提示安裝
  2. 配置環境變量:JAVA_HOME,Path,CLASSPATH,此處不贅述,可以在網上查到很多教程
  3. 檢測配置環境是否正確:java,javac,java -v這些命令,可以檢測

Adroid SDK安裝和環境變量配置

開發安卓需要Android SDK,現在我們不使用Android Studio,可以通過下載基本的Android命令行工具來完成相關配置

下載資源地址:https://developer.android.com...

  1. 將上面下載的壓縮包解壓縮到某個目錄下(我放在 D:android_sdk),得到一個tools文件夾,裏面有我們需要的命令行工具。
  2. 進入toolsbin,找到SDKManager.bat,我們按住shift鍵+右鍵這個目錄的空白處,點擊在此處打開命令提示符窗口。
  3. 輸入sdk按Tab鍵補全,然後加 --list。可以看到一大堆項目。
  4. 我們使用命令行:.sdkmanager.bat "你要下載的包名"

       下載以下幾個我們需要的項目:
       build-tools;xxxxxx 平臺構建工具
       platform-tools 平臺工具集
       platforms;android-xx 哪個APIs 對應構建工具
       patcher;v4 補丁包
       extras;intel;Hardware_Accelerated_Execution_Manager PC硬件加速相關
       emulator 模擬器 (可選 如果你打算直連手機的話就不需要)
       system-images;android-xx;google_apis_playstore;x86 如果你用模擬器就需要一個系統鏡像
    
    
  5. 配置環境
    ANDROID_HOME、ANDROID_SDK
    圖片描述

Flutter安裝和配置

下載資源地址:https://flutter.io/docs/devel...

  1. 由於國內訪問Flutter可能會受到限制,Flutter官網給中國開發者提供了臨時鏡像,我們把下面的環境變量添加到用戶環境裏,就可以獲取臨時鏡像,如果翻牆的話,應該設置不設置都無法所謂。
    PUB_HOSTED_URL=https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  2. 將安裝包解壓到你想安裝的Flutter_SDK路徑下(我放在C:srcflutter下)
  3. 在Flutter安裝目錄的flutter文件下找到flutter_console.bat,雙擊運行病啓動flutter命令行,接下來你就可以在flutter命令行運行flutter命令了
  4. 配置環境
    Path後追加flutterbin的全目錄,重啓windows應用次更改
  5. 使用flutter doctor命令行可以檢測環境是否準備充分,按照運行後給出的提示來補充依賴

VSCode安裝和配置

這裏可以參考此處:https://flutterchina.club/get...

  1. 調用 View>Command Palette…圖片描述
  2. 輸入 ‘install’, 然後選擇 Extensions: Install Extension action圖片描述
  3. 在搜索框輸入 flutter , 在搜索結果列表中選擇 ‘Flutter’, 然後點擊 Install圖片描述
  4. 安裝後重啓VSCode

編寫第一個Flutter應用

此處沒有什麼難處,官網給出了詳細的步驟:https://flutterchina.club/get...

我遇到的問題:沒有安裝模擬器,需要事先安裝一下,然後在vscode的右下角點擊No devices進行模擬器配置,可以使用Debugger調試開發,也可使用fultter run之後R進行熱加載。下面就可以進入開發了。
圖片描述


有記錄的不詳細不正確的地方,歡迎留言互相探討。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章