點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Android Studio 建立 Flutter 專案

Sam Xiao's Avatar 2024-08-07

Flutter 可以使用多種方式建立專案,本文介紹使用 Android Studio 建立 Flutter 專案。

Version

Android Studio 2024.1.1

New Flutter Project

overview001

  • Android Studio 安裝 Flutter plugin 之後,會多了 New Flutter Project,以此建立 Flutter 專案

overview002

  • Flutter 設定 Flutter SDK 路徑

當使用 Homebrew 管理 Flutter SDK 時,可方便切換 Flutter 版本,但路徑較為特別,Homebrew 會將 Flutter SDK 放在 /opt/homebrew/Caskroom

overview003

  • Project name:只能使用 snake case 命名法,不能使用 camel casekebab case,因為 project name 會拿來當 module name,且 Dart 的 module 只能以 snake case 命名
  • Plateforms:勾選 AndroidiOSmacOSWeb

Web

overview004

  • DeviceChrome (Web)
  • Run:開始編譯執行

overview005

  • 在 Chrome 執行經典 counter

macOS

overview006

  • DevicemacOS (desktop)
  • Run:開始編譯執行

overview007

  • 在 macOS 執行經典 counter

iOS

overview008

  • Device:選擇 Open iOS Simulator 先執行 iOS Simulator

overview009

  • 將 iOS Simulator 跑起來

overview010

  • Device:選擇 iPhone 15 Pro Max (mobile)
  • Run:開始編譯執行

overview011

  • 在 iOS 執行經典 counter

Android

overview012

  • 在 Device Manage 啟動 AVD

overview013

  • 在 Running Devices 按下 power 啟動 Android

overview014

  • Device:選擇 Android 14 (mobile)
  • Run:開始編譯執行

overview015

  • 在 Android 執行經典 counter

Conclusion

  • 相同的 codebase 可同時在 Web、macOS、iOS 與 Android 執行