用 VS Code 建置 Flutter 開發環境

更新於 2021/06/24 分類於 Flutter

前言

Apache Cordova、Ionic、NativeScript、React Native、Xamarin 短短的幾年時間跨平台技術其實已經多到讓人不知如何下手，Google 卻在這些技術都已經十分成熟的階段推出了自有的技術 Flutter，再加上使用相對少人使用的 Dart 當做開發語言，剛開始聽到時還真讓摸不著原因，一般會使用跨平台技術無非是想縮短開發時程或是學習成本，Flutter 似乎沒有任何優勢，不過花點時間研究就可發現它嘗試解決跨平台技術的問題。

魚與熊掌

目前較常見的跨平台技術主要有

WebView：以 JavaScript 為開發語言，相當於在一個全螢幕的瀏覽器內執行本機端的網站，底層提供 API 讓我們可以與一些設備、感應器界接，不過操作流暢度難免較差，還要注意不同設備對於 HTML 的支援度，對於操作較單存的程式來說較適合。
原生介面：以單一程式語言開發，但是在編譯時期或是執行時期透過原生程式來處理，效能幾乎與原生程式無異，但是往往還是需要依照不同平台的特性撰寫專屬的程式，這代表開發人員還是要對於平台架構有一定的了解。

我們可以看到跨平台最大的問題就是界面，不同平台對於介面的呈現模式甚至頁面的生命週期都有所不同，而 Flutter 解決方法就是全部自己來處理，它將所有裝置都是為一張白紙(Canvas)，所有呈現的原件都透過 Skia 這個輕量型的 C++ 類別庫繪製，藉此既保留性能優勢同時也消除平台差異性，而且它已經內建 Material Design 元件以及具備 iOS 風格的 Cupertino 元件，對於一般 App 來說已經夠用了。

由系統架構可以看到雖然我們是撰寫 Dart 語言，但是最終卻是由 C++ 引擎來執行。

只能在 Android 與 iOS 上執行

從 Flutter 官方文件來看只能直行在 Android 4 和 iOS 8 版本以上的系統，當然未來的 Google Fuchsia 系統也會支援，只是不知道什麼時候才會到來，不過在 GitHub 上卻可以在 Google 官方帳號下看到一個有趣的項目 flutter-desktop-embedding，雖然還不算是官方正式項目，不過 Flutter 要在 Linux、Mac、Windows 上執行應該是指日可待。

開發環境：Windows

因為筆者是使用 Windows，因此只說明 Windows 安裝方式，macOS 與 Linux 請參閱官方說明。
Windows 如下：

安裝 Git

需要 Windows 7 SP1 以上版本的作業系統，需使用 PowerShell 5.0 以上版本或是 Git for Windows，因為是開發程式，所以 Git 可說是首選工具，要注意的是安裝 Git 過程需選擇 “Use Git from the Windows Command Prompt”，讓我們可以透過命令提示字元使用 Git 指令，這也是預設安裝選項。

安裝 Flutter SDK

接著是安裝 SDK，現階段 Flutter 仍處於測試階段，所以開啟 Flutter SDK 頁面可以看到目前提供的是壓縮檔，最新版本為 v0.5.1。

我們只要下載並接壓縮即可，筆者便將它解壓縮到 D:\Tools\flutter，特別要注意的是避免將資料夾放置在需要特殊權限的目錄下，例如：C:\Program Files\。

接著將 flutter 內的 bin 資料夾路徑加入到環境變數 Path 內，方便我們操作執行 Flutter 指令。

安裝 Android Studio

接著我們可以透過指令 flutter doctor 來診斷開發環境，由顯示的訊息可以知道我們還需要安裝 Android SDK 以及 Android Studio，雖然我們目標是使用 VS Code 來開發，但是 Android Studio 安裝過程會順便安裝 SDK，而且透過 Android Studio 可以方便建立模擬器，所以我們就直接安裝 Android Studio 比較方便。

目前 Flutter 仍處於測試階段，預設會匿名傳送一些統計資訊與崩潰報告，用以協助改善 Flutter 工具，如果真的會介意可以透過指令 flutter config --no-analytics 來關閉。

連結到官方頁面便可看見下載按鈕，勾選同意使用條款便可下載安裝檔。

安裝方式直接一直點選下一步即可，不需要特殊設定。

第一次啟動會進入設定畫面。

如果你跟筆者一樣喜歡暗色系的介面可以選擇 “Darcula”。

記得勾選 “Android Virtual Device”，我們需要模擬器來執行程式，當然你也可以順便修改 Android SDK 安裝路徑，像筆者 C 磁碟空間較小，所以路徑就改為 D:\Tools\Android\Sdk。

接下來我們需要增加環境變數 ANDROID_HOME，並將變數值設定為 SDK 存放路徑。

再透過指令 flutter doctor 來診斷，可以看到我們還需要同意一些授權，可以透過指令 flutter doctor --android-licenses 來處理，執行過程會顯示攏長的授權條款，當然我們需要按 Y 表示接受。

最後我們需要安裝 Android Studio 外掛程式：Flutter 與 Dart，透過 Android Studio 上方工具列，選擇 File\Settings\Plugins\Browse repositories 來瀏覽可安裝的外掛程式清單。

直接安裝 Flutter 便會同步安裝 Dart。

重新啟動 Android Studio 便可以看到 Flutter 專案的建立功能選單。

建立 Android 模擬器

同樣透過功能選單 File\Settings 來開啟設定頁面並點選 Android SDK 選項，如果希望可以透過實際的 Android 來測試程式，可以安裝 Google USB Driver，如果電腦設備是 Intel 的 CPU 則建議安裝 Intel x86 Emulator Accelerator 來增加模擬器執行速度。

接著開啟 AVD Manager 來建立一個 Android 模擬器。

選擇手機尺寸與作業系統版本，如果該版本映像檔還未下載，則需先點選 Download 來下載才可使用。

模擬畫面選擇透過”硬體”處理會比透過”軟體”來的快，除非是顯示有問題，否則建議強制設定為”硬體”。

模擬器建立好後可以先執行看看是否正常。

安裝 Visual Studio Code

對於想使用 VS Code 來開發的人來說 Android Studio 的貢獻就到此為止，我們可以跟它說掰掰了，接著開啟 [VS Code](VS Code) 官方網站，下載並執行安裝檔。

安裝完後啟動 VS Code，點選左邊功能選單的擴充功能圖示按鈕，分別搜尋並安裝擴充功能：Flutter 與 Android iOS Emulator，Dart 會再安裝 Flutter 時同步被安裝，安裝完後記得重新啟動才會套用。

當然如果想要變更開發工具的版面配色以及檔案圖示也可以另外安裝喜歡的擴充功能，
安裝後可以透過左下角的設定圖示按鈕來選擇要套用的主題。

接著需要為 Android iOS Emulator 設定模擬器啟動程式的路徑，點選左下角的設定圖示按鈕，選擇設定功能選單來開啟設定檔，搜尋到 emulator.emulatorPath 設定，選擇編輯圖示”在設定中取代”即可將參數複製到右方加以修改。

因為筆者將 Android SDK 安裝在 D:\Tools\Android\Sdk，所以設定值就修改成 D:\Tools\Android\Sdk\emulator\emulator。

依照網站說明應該是選擇 tools 資料夾下的 emulator.exe，不過測試後發現需選擇 emulator 資料夾下的才有辦法啟動模擬器。

我們可以透過 ctrl+shift+p 開啟命令選擇區，輸入 emulator 然後選擇要啟動的模擬器名稱即可開啟模擬器。

建立 Flutter 專案

開啟命令提示字元，透過 Flutter SDK 指令 flutter create [Project Name] 來建立專案，它會在當前目錄下依專案名稱建立同名資料夾，並將鄉專案執行所需檔案都一並建立。

從畫面上可以看到其實它還會順便執行 flutter doctor 來幫我們診斷目前開發環境是否正常。

同時它也說明我們可以透過指令 flutter run 來執行程式，只是目前沒有開啟任何模擬器或是連接實體設備，所以如果執行則會出現 “No connected devices.” 的警告訊息。

我們先透過 VS Code 來開啟專案，可以直接在專案路徑下輸入 code . 來啟動 VS Code 並載入當前目錄。

我們可以先為專案建立一個 Flutter 的組態檔，點選左方偵錯圖示按鈕，點選新增組態再選再 Dart & Flutter 即可建立組態檔。

組態檔存放路徑就是在專案目錄下 .vscode\launch.json。

接下來我們可以先開啟模擬器並透過 F5 來啟動專案，正常情況下預設畫面就會呈現。

後記

這幾天的研究心得如下：
如果沒有特殊需求的話，整個專案都是在 lib 資料夾內撰寫 Dart 程式。

例如啟用特殊權限就必須到裝置對應的目錄下去設定，網路連線可以說是必要需求，所以預設便會開啟權限。

Flutter 將很多功能都切割成小功能的 Widget，讓我們就像玩樂高積木一樣自己拼湊出想要的結果，當然直接使用 Material Components Widgets 應該是最好的選擇。

官方與社群大神已經提供不少套件，所以可以先到 Flutter Packages 頁面搜尋，不必急著什麼都自己開發。

外部資源如圖片、字型再加入到專案後還需到 pubspec.yaml 檔案內宣告才可使用。

不難看出 Flutter 的介面開發是參考 React 的 JSX 風格與變更通知模式，因為這也是 React 的強項，Dart 語言與 TypeScript 都在解決 JavaScript 不足之處，所以相似度很高，對於已經會 TypeScript 或是物件導向語言的人來說入手應該不難。
Angular 有 RxJS，Flutter 有 RxDart。

資源

Build Native Mobile Apps with Flutter：由 Google 所錄製的教學影片。
MTechViral：由 Pawan Kumar (GDE for Flutter) 所錄製的教學影片。
Animations in Flutter：動畫特效。
Flutter Deep Dive: Gestures：手勢偵測。
Flutter Playground：場景效果範例。