Flutter爬坑之路window環境(一)

ErdeRookie發表於2020-04-05

部署

系統環境

要安裝並執行Flutter,您的開發環境必須滿足以下最低要求:

  • 作業系統: Windows 7 或更高版本 (64-bit)。
  • 磁碟空間: 400 MB (不包括Android Studio的磁碟空間)。

使用Flutter所需要的依賴程式(Git for Windows,Flutter,Android Studio)

  • Git for Windows:
    • 如果已安裝Git for Windows,請確保命令提示符或PowerShell中執行 git 命令。否則後續操作會出現錯誤。
    • Git for Windows(Git命令列工具),國內開發者可以使用 淘寶映象選取你需要的版本進行安裝。
  • Flutter:
    • 獲取安裝包:
      • Flutter官網下載其最新可用的安裝包
      • Flutter github專案獲取安裝包
    • 將安裝包zip解壓到你想安裝Flutter SDK的路徑(如:C:\flutter;注意,不要將Flutter安裝到需要一些高許可權的路徑如 C:\Program Files\ ),之後所有需要指定Flutter SDK路徑都是指向解壓的路徑C:\flutter
    • 在Flutter安裝目錄(C:\flutter)的flutter檔案下找到flutter_console.bat雙擊執行並啟動Flutter命令列,你就可以在Flutter命令列執行flutter命令了。
    • 配置環境變數要在終端執行 flutter 命令, 你需要新增以下環境變數到系統PATH:
      • 開啟“控制皮膚”>“系統和安全”>“系統”>左側側邊欄“高階系統設定”>“環境變數”
      • 在系統變數(使用者變數也可以)的列表中找到Path(如果不存在就新建一個),點選編輯,新建C:\fultter\bin儲存並重新啟動計算機。
      • 重啟完成,在任何目錄(資料夾)開啟Powershell
      flutter doctor
      複製程式碼
      該命令檢查您的環境並在終端視窗中顯示報告。Dart SDK已經在捆綁在Flutter裡了,沒有必要單獨安裝Dart。 仔細檢查命令列輸出以獲取可能需要安裝的其他軟體或進一步需要執行的任務(以粗體顯示)
      [-] Android toolchain - develop for Android devices
      • Android SDK at D:\Android\sdk
      ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
      • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.
      複製程式碼
  • Android Studio:
    • 安裝Android Studio中文社群連結
    • 啟動Android Studio,然後執行“Android Studio安裝嚮導”。這將安裝最新的Android SDK,Android SDK平臺工具和Android SDK構建工具,這是Flutter為Android開發時所必需的
    • 配置安卓模擬器,要準備在Android模擬器上執行並測試您的Flutter應用,請按照以下步驟操作:
      • 啟動 Android Studio>Tools>Android>AVD Manager 並選擇 Create Virtual Device.
      • 選擇一個裝置並選擇 Next。
      • 為要模擬的Android版本選擇一個或多個系統映像,然後選擇 Next. 建議使用 x86 或 x86_64 image .
      • 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬體加速.
      • 配置環境變數(缺失該步驟會導致找不到模擬裝置)
        • 開啟“控制皮膚”>“系統和安全”>“系統”>左側側邊欄“高階系統設定”>“環境變數”
        • 在系統變數(使用者變數也可以)的列表中新增ANDROID_HOME,變數值:C:\Users\……\AppData\Local\Android\Sdk(此處輸入Android Sdk路徑)

部署完成

如果一切順利,我們開啟Powershell再次執行'flutter doctor'能看到如下資訊。

PS C:\flutter> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.720], locale zh-CN)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[!] Connected device
    ! No devices available

![](https://user-gold-cdn.xitu.io/2020/4/5/1714876e977bd25f?w=1107&h=435&f=png&s=38864)
! Doctor found issues in 1 category.
複製程式碼

配置編輯器 Android Studio

Android Studio: 為Flutter提供完整的IDE體驗

  • 前面我們已經安裝了Android Studio,此步驟略過。
  • 安裝Flutter和Dart外掛
    • Flutter外掛: 支援Flutter開發工作流 (執行、除錯、熱過載等).
    • Dart外掛: 提供程式碼分析 (輸入程式碼時進行驗證、程式碼補全等).
  • 安裝步驟:
    1. 啟動Android Studio.
    2. 開啟外掛首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
    3. 選擇 Browse repositories…, 選擇 Flutter 外掛並點選 install.
    4. 重啟Android Studio後外掛生效.
  • 也可以:
    1. 啟動Android Studio.
    2. 點選File>setting>plugins 搜尋Flutter/Dart,選擇並點選install。
    3. 重啟Android Studio後外掛生效.

建立一個新的專案

  1. 選擇 File>New Flutter Project
  2. 選擇 Flutter application 作為 project 型別, 然後點選 Next
  3. 輸入專案名稱 (如 myapp), 然後點選 Next
  4. 點選 Finish,等待Android Studio安裝SDK並建立專案.

執行該專案

定位到Android Studio 工具欄:

  1. 在 target selector 中, 選擇一個執行該應用的Android裝置. 如果沒有列出可用,請選擇 Tools>Android>AVD Manager 並在那裡建立一個(如果該步驟出現錯誤,應檢查是否配置ANDROID_HOME的環境變數).

    Flutter爬坑之路window環境(一)

  2. 在工具欄中點選 Run圖示, 或者呼叫選單項 Run > Run.(如果Running Gradle task 'assembleDebug'...卡在這一步則需要修改為國內阿里映象)

    1. 在新建的專案內找到buid.gradle檔案
      buildscript {
          ext.kotlin_version = '1.3.50'
          repositories {
              //修改此處
              // google()
              // jcenter()
              maven { url 'https://maven.aliyun.com/repository/google' }
              maven { url 'https://maven.aliyun.com/repository/jcenter' }
              maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
          }
      
          dependencies {
              classpath 'com.android.tools.build:gradle:3.5.0'
              classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
          }
      }
      allprojects {
          repositories {
              //修改此處
              // google()
              // jcenter()
              maven { url 'https://maven.aliyun.com/repository/google' }
              maven { url 'https://maven.aliyun.com/repository/jcenter' }
              maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
          }
      }
      複製程式碼

    Flutter爬坑之路window環境(一)
    2. 找到Flutter Sdk所在路徑C:\flutter\packages\flutter_tools\gradle\flutter.gradle檔案。

     buildscript {
         repositories {
             //修改此處
             // google()
             // jcenter()
             maven { url 'https://maven.aliyun.com/repository/google' }
             maven { url 'https://maven.aliyun.com/repository/jcenter' }
             maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
         }
         dependencies {
             classpath 'com.android.tools.build:gradle:3.5.0'
         }
     }
    複製程式碼

    Flutter爬坑之路window環境(一)

  3. 如果一切正常, 您應該在您的裝置或模擬器上會看到啟動的應用程式:

Flutter爬坑之路window環境(一)

相關文章