【自種樹自乘涼】Flutter 搭建開發環境

pany發表於2021-08-18
Flutter開發環境

本文已參與掘金創作者訓練營第三期「高產更文」賽道，詳情檢視：掘力計劃｜創作者訓練營第三期正在進行，「寫」出個人影響力。

提前說

  • 本文僅為 Windows 下搭建 Flutter 的 Android 開發環境教程
  • 本文三個核心：程式碼編輯器 & Flutter SDK（內含 Dart SDK） & Android SDK

正文

1. 新增環境變數（國內映象）

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

備註：Linux下直接執行以上兩條命令，Windows下需手動新增

2. 配置 Git 環境

下載地址：git-scm.com/download/wi…

備註：Flutter 需要 Git 環境的支援，直接下載安裝即可

3. 配置 Java 環境

這個步驟當前不是必須的，如果有需要的話就去這個連結下載 JDK 包（一般 8.0 的版本就行）

下載地址：www.oracle.com/java/techno…

"在後期，打包 apk 的時候，需要建立金鑰庫用於 app 簽名時需要 JDK 的環境"

4. 下載 Flutter SDK

下載地址：flutter.dev/docs/get-st…

注意：不要將檔案放在高許可權的路徑下，如 C:\Program Files\ ，並且要保證路徑為全英文。

在 flutter 檔案下找到 flutter_console.bat，雙擊執行並啟動 flutter 命令列，接下來，你就可以在 flutter命令列執行 flutter 命令了。

比如：

flutter doctor
複製程式碼

5. 配置環境變數

如果你想在 Windows 系統自帶命令列執行 flutter 命令，需要新增以下環境變數到使用者 PATH：

export PATH = D:\flutter\bin
複製程式碼

注意：D:\flutter\bin 為我的安裝目錄，你必須根據你的 Flutter SDK 目錄為準。

6. 安裝 Android Studio

安裝它的目的不是為了強制讓你用它編寫程式碼，我們主要目的是獲取 Android Studio 裡面自帶的最新版 Android SDK！

下載地址：www.androiddevtools.cn/

7. 檢查環境

在命令列中執行：

flutter doctor
複製程式碼

執行結果如下表示全部配置完成：

image.png

但是這篇文章到這裡我們只完成了圖上 4 項中的前 3 項（FLutter SDK、Android SDK、Android Studio），第 4 項為 Android 虛擬機器，這個等我們執行程式的時候再建立並啟動它。

注意：圖中有出現 ! 為警告，不會影響程式的執行。如果出現 x 就說明環境不對，需要正對性修正。

比如安裝好 Android Studio 後缺少安卓證照，會提醒你需執行：

flutter doctor --android-licenses
複製程式碼

你只需要對症下藥，直到執行 flutter doctor 命令不會出現 x 符號！

8. 安裝外掛

啟動 Android Studio，進入Plugins（File > Settings > Plugins）搜尋 Flutter，並安裝 Flutter 外掛

9. 建立專案

啟動 Android Studio > File > New Flutter Project

10. 安裝虛擬機器

點選 Android Studio 中的上方選單tool - AVD Manager 選項 > 選擇 Create Virtual Device >選擇虛擬機器型別 > 選擇安卓系統版本（一般選 9.0 以上） > 啟動虛擬機器

image.png

11. 執行專案

如果執行失敗，原因很有可能如下：

修改掉專案下的 android 目錄下的 build.gradle 檔案，把 google() 和 jcenter() 這兩行去掉。改為阿里的連結。如圖：

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.1.2'
    }
}

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 SDK 包下的 flutter.gradle 檔案（......flutter\packages\flutter_tools\gradle\flutter.gradle），如圖：

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' }
}
複製程式碼

12. 改用 vs code

如需將程式碼編輯器改用 vs code 我們只需要為 vs code 配置名為 Flutter 和 Dart 的外掛，並且將剛才建立的虛擬機器啟動起來即可。

一鍵啟動虛擬機器的方法：

新建一個 .bat 檔案，寫入：

emulator.exe的路徑 -netdelay none -netspeed full -avd 之前建立的虛擬機器名稱
複製程式碼

我的如下：

C:\Users\pc\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_6P_API_29
複製程式碼

然後雙擊即可啟動虛擬機器，再不用先啟動 Android Studio了。

相關文章