安裝開發環境

安裝 Android Studio

安裝 Android Studio 是建立 Flutter 環境的起點,你可以直接從 Android Studio 的官網 下載到 Android Studio,但是我在這裡使用的是 Jetbrains Toolbox 來安裝,我在這裡選用的是 4.0.1 因為在 Flutter Plugin 在 Canary 版本上有時候會出錯(見 issue: https://github.com/flutter/flutter-intellij/issues/4136) 雖然已經提到現在已經可以使用,但是需要透過更新,為了省去不必要的麻煩,我直接使用了 4.0.1 版本。

安裝 flutter 和 dart 的 plugin

安裝完畢之後記得要重新開啟 IDE,plugin 才會生效喔。

安裝 openjdk-8-jdk

在這裡我們需要安裝 OpenJDK 8,因為在 JDK 11 在之後的安裝會出現一些錯誤,這個問題在我寫文章的當下尚未被修復(見 issue: https://github.com/flutter/flutter/issues/22361

sudo apt install openjdk-8-jdk
~$ java -version
openjdk version "1.8.0_265"
OpenJDK Runtime Environment (build 1.8.0_265-8u265-b01-0ubuntu2~20.04-b01)
OpenJDK 64-Bit Server VM (build 25.265-b01, mixed mode)

安裝 flutter

首先我們使用 snap 來安裝 flutter。

~$ sudo snap install flutter --classic

接著我們運行flutter doctor來檢測運行環境是否滿足。

~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.20.2, on Linux, locale en_US.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Android Studio (version 4.0)
[!] Connected device
    ! No devices available

首次運行這個指令時,會看到錯誤顯示:

Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses

我們只需要運行下面這個指令,並且一路按 y 同意 licenses 即可。

~$ flutter doctor --android-licenses

接著我們重新執行flutter doctor就會發現除了 Connected device 的欄為還是驚嘆號外,其他都已經安裝完畢了,而 Connected device 我們不用去管他,因為我們稍後要連接模擬器。

~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.20.2, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Android Studio (version 4.0)
[!] Connected device
    ! No devices available

開啟專案

接著我們打開 Android Studio 就會看到:Start a new Flutter project,點下去之後選擇Flutter Application

記得第一次要按 Install SDK

完成之後打上 package name,這個 package name 必須全局唯一,你可以這樣命名你的 package name: 團隊名稱或你的暱稱.軟體名稱,以我的這個範例來舉例,package name 就會設為floatflower.hello_world

成功生成

運行應用程式

點選上放工具列中的 AVD 工具(下圖框起來的按鈕)。

選擇一個手機的型號,這個沒有硬性規定,我在這裡選擇的是 Pixel 3a,接著下載 Android OS 的映像檔,在這裡我選擇了 Android 9.0 的版本

待下載完畢之後就可以,就可以按下右邊的播放鍵,就可以將模擬器開起來,

當模擬器開起來之後,我們就可以按下這個按鈕,整個專案就會進入編譯,並且將結果實時的展現在虛擬機上。

到這裡就完成 Flutter 的安裝與 Hello World 了。