Skip to content

[Flutter] 在 Android Studio 上配置 Flutter 開發環境

Last Updated on 2021-10-11 by Clay

Flutter 是一套由 Google 所開發、並積極推廣的 APP 開發框架，其中是使用 Dart 語言來撰寫我們所希望實作的功能。其中，Flutter 最廣為人知的框架特性，便是你只需要『寫一份程式碼』便能同時編譯成 Android 和 iOS 上可以執行的程式。

除此之外，Google 也號稱 Flutter 執行的效能與原生的 Kotlin 和 Swift 相仿，這是非常吸引人的一點。

隨著時間流逝，Flutter 的社群也越來越龐大。現在若是投身 Flutter 來開發 APP，若是有什麼想要製作的功能，不妨先上開發社群看看是否有人已經製作了你所需要的套件；據我所知，目前許多常見功能的套件都已經很成熟了，可以直接使用、不必重複造輪子。

話題扯遠了。

今天我想要紀錄的，是如何透過 Android Studio 配置 Flutter 開發環境。我的系統是 MacOS，Windows 以及 Linux 的則同樣可以參考 Flutter 官方的 SDK 配置教學文件：https://flutter.dev/docs/get-started/install。

在 Android Studio 上配置 Flutter 開發環境

以下，我會一步步紀錄如何配置這些環境，大方向是安裝好 Flutter SDK，確認 flutter doctor 指令能執行（這是 Flutter 偵測開發環境依賴的指令），並一步步按照指令偵測的缺失環境給予補足。

一般來說，若是 flutter doctor 指令顯示環境沒有問題，那多半便可以著手 Flutter APP 的開發了。


Step 1: 安裝 Flutter SDK

首先，前往下方網址安裝 Flutter SDK： https://flutter.dev/docs/get-started/install

選擇你的作業系統版本，以我 MacOS 為例，點擊下方的網頁畫面中的下載按鈕。

下載完畢後，按照指南的步驟操作。（我將下載檔案放在 Downloads 資料夾底下）

mkdir ~/Tools
cd ~/Tools
unzip ~/Downloads/flutter_macos_1.22.6-stable.zip


接著設定環境變數。為了讓設定在你每一次開啟終端機時生效，將環境變數的設定加入 ~/.bash_profile 這份檔案（或是你的 ~/.bashrc）。

以我的環境為例，我的 Flutter SDK 解壓縮在 ~/Tools 資料夾底下，所以便設定 ~/Tools/flutter/bin 的絕對路徑。

# Environment
export PATH="$PATH:/Users/clay/Tools/flutter/bin"


讓設定生效：

source ~/.bash_profile



(Optional) 執行 flutter doctor

現在終端機中應該已經可以使用以下指令了：

flutter doctor


Output:

[✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.7 19H2 darwin-x64, locale
    en-TW)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.


正如剛才所說，這個指令會偵測目前要開發 Flutter 尚有哪些可能缺乏的套件與軟體。

從上方的訊息中可以看到，除了 Flutter SDK 安裝成功之外，我們尚缺乏了：

  • Android SDK
  • Xcode (CocoaPods)
  • Android Studio
  • Connected device （設備比較沒關係，需要時再建立即可）

當然，你缺乏的項目可能與我不同。只需要按照自己 flutter doctor 給予的建議安裝即可，不必完全與我下方的步驟一致。


Step 2: 安裝 Android Studio （會同時安裝 Android SDK）

下載 Android Studio： https://developer.android.com/studio/index.html 並進行安裝。安裝過程中一路選擇 Next 即可完成安裝。接著可以在終端機中輸入以下指令：

flutter doctor --android-licenses


一路選擇 Yes，就可以把 Android 的授權完成。（這一步很重要）


Step 3: 安裝 Android Studio 的 Flutter、Dart Plugin

可以從 Configure > Plugins 打開安裝的選項介面。

查詢 Flutter 跟 Dart 並安裝。

安裝完畢後，重新啟動你的 Android Studio。


Step 4: 安裝 Xcode (MacOS)

Xcode 可以從 App Store 中下載。

下載完畢後，在終端機中輸入以下指令：

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch


此外，我們還需要安裝 CocoaPods。

sudo gem install cocoapods


若是在安裝過程中發生錯誤，或許可以參考這篇：[已解決] /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-19/2.6.0/ffi-1.14.2/mkmf.log extconf failed, exit code 1

來切換 Ruby 版本。至少，我是這樣安裝成功的。


Step 5: 確認安裝成功

開啟 Android Studio，應該會看見有個 Create New Flutter Project 的選項。我們也選擇這個，建立一個 Flutter 專案。

打開後，應該會有個最基本的範例程式碼。在這裡，為了能順利測試，我建立了一個虛擬的 iOS 裝置，並執行範例程式碼。

上方紅色框起的地方為我設定虛擬裝置的地方，而右側的手機畫面則是範例程式的執行結果。

可以發現當我們點擊藍色的懸浮按鈕時，畫面正中間的數值會不斷增加。到這一步，我們在 Androird Studio 上配置 Flutter 的開發環境已經成功了。

References

Read More

Tags:

Leave a Reply