【Flutter 學習筆記】如何建置 Android 應用程式開發環境

【Flutter 學習筆記】如何建置 Android 應用程式開發環境

更新於 發佈於 閱讀時間約 8 分鐘
raw-image
【Flutter 學習筆記】線上課程教學影片:連結
【Flutter 學習筆記】系列文章目錄:連結
raw-image

這篇文章將帶著大家學習如何在 Windows 和 macOS 上建置 Flutter Android 應用程式開發環境。


硬體需求

在開始之前,請確保您的硬體符合以下規格:

macOS 硬體需求

  • CPU:建議至少 4 核心(8 核心更佳,以提升性能)
  • 記憶體:最少 8GB RAM(建議 16GB,以應對大型專案)
  • 顯示器解析度:至少 1366 x 768(建議 1920 x 1080,以獲得更佳的開發體驗)
  • 可用磁碟空間:至少 44GB(建議 70GB,以便安裝必要的工具和資源)

Windows 硬體需求

  • CPU:建議至少 4 核心(8 核心更佳)
  • 記憶體:最少 8GB RAM(建議 16GB)
  • 顯示器解析度:至少 1366 x 768(建議 1920 x 1080)
  • 可用磁碟空間:至少 44GB(建議 70GB)

軟體需求

請確保您的軟體環境符合以下要求:

  • macOS:macOS 11 (Big Sur) 或更新版本
  • Windows:Windows 10 或更新版本
  • 預設 shell:macOS 使用 zsh(自 macOS Catalina 起的預設 shell),Windows 使用 PowerShell 或 命令提示字元

安裝必要的開發工具

安裝 Android Studio

下載並安裝 Android Studio 2023.3.1 (Jellyfish) 或更新版本。這是開發 Android 應用程式的主要 IDE,提供強大的功能和工具來支援您的開發需求。

安裝 Git

確保您已安裝 Git 2.27 或更新版本。如果尚未安裝,可以使用以下命令:

  • macOS: brew install git
  • Windows: 下載 Git 安裝程式並依指示安裝

安裝 Visual Studio Code

建議安裝 Visual Studio Code 1.77 或更新版本,並安裝 Flutter 擴充功能。這將大大簡化 Flutter 開發流程,並提供更佳的編輯體驗。

安裝 Flutter SDK

您有兩種方式可以安裝 Flutter SDK:

使用 VS Code 安裝

  1. 打開 VS Code
  2. 按下 Command + Shift + P (macOS) 或 Ctrl + Shift + P (Windows) 開啟命令面板
  3. 輸入 "flutter",選擇 "Flutter: New Project"
  4. 如果尚未安裝 Flutter SDK,選擇 "Download SDK"
  5. 選擇 SDK 安裝位置(macOS 建議選擇: 「~/development/」 或 Windows 建議選擇:「C:\development\」)

手動下載安裝

  • 從 Flutter 官網下載最新的穩定版 SDK
  • 解壓縮檔案到您想存放 Flutter 的目錄(macOS 例如: 「 ~/development/flutter」 或 Windows: 「 C:\development\flutter」)

設定環境變數

將 Flutter 加入 PATH 環境變數,以便在終端機中輕鬆使用:

  • macOS: 編輯 ~/.zshenv 檔案(如果不存在則創建),加入以下行:export PATH="$PATH:~/development/flutter/bin"
  • Windows: 在系統環境變數中新增 Flutter 的 bin 目錄路徑(例如 C:\development\flutter\bin)

設定 Android 開發環境

設定 Android Studio

啟動 Android Studio,使用 SDK Manager 安裝以下組件:

  • Android SDK Platform, API 35
  • Android SDK Command-line Tools
  • Android SDK Build-Tools
  • Android SDK Platform-Tools
  • Android Emulator

設定 Android 模擬器

在 Android Studio 中開啟 Device Manager,點擊 "Create Device",選擇設備類型和系統映像。若您的電腦使用 Intel CPU,建議額外安裝並配置硬體加速,以提升模擬器的性能和流暢度。

同意 Android 授權

執行以下命令並同意所有授權,以確保開發環境的正常運作:

  • flutter doctor --android-licenses


設定連結真實 Android 裝置

在您的 Android 裝置上啟用開發者選項和 USB 偵錯功能,然後將裝置透過 USB 傳輸線連接到 Mac 或 Windows 電腦,以便進行實機測試。請確保使用合適的 USB 傳輸線,以確保連接穩定。

開啟開發者選項

在 Android 設備上啟用開發者選項和 USB 偵錯的步驟如下:

  1. 進入設定
    • 打開設備的「設定」應用程式。
  2. 找到版本號碼
    • 滾動至「關於手機」或「關於平板電腦」,尋找「版本號碼」選項。
  3. 啟用開發者選項
    • 連續點擊「版本號碼」七次,直到出現提示「您現在已成為開發人員」。
  4. 開啟 USB 偵錯
    • 返回設定主頁,選擇「系統」>「開發者選項」。
    • 開啟「USB 偵錯」選項,並在彈出窗口中選擇「確定」。

連接設備

  1. 使用 USB 傳輸線連接
    • 將 Android 設備透過 USB 傳輸線連接至電腦。
  2. 允許 USB 偵錯
    • 當設備彈出提示詢問是否允許 USB 偵錯時,選擇「始終允許來自此計算機的調試」。

在 Android Studio 中設置

  1. 打開 Android Studio
    • 啟動 Android Studio 並載入您的專案。
  2. 檢查設備是否被識別
    • 在工具欄中查看設備下拉菜單,確認您的實體設備是否顯示在列表中。如果顯示為「No Devices」,請檢查 USB 連接及驅動程式安裝情況。
  3. 安裝 Google USB Driver(如必要)
    • 若設備未被識別,可能需要安裝 Google USB Driver。可透過 SDK Manager 進行安裝。

測試應用程式

    • 在 Android Studio 中,點擊綠色的播放按鈕(Run),選擇您的實體設備作為運行目標。

驗證安裝

執行以下命令檢查環境設定,確保所有必要組件都已正確安裝:

  • flutter doctor
    解決任何報告的問題,確保開發環境的完整性。

開始開發

恭喜!您現在已經成功設置了 Flutter Android 應用程式開發環境。接下來,您可以:

  • 創建您的第一個 Flutter 專案
  • 學習 Dart 程式語言
  • 學習 Flutter 基礎知識
  • 探索 Flutter 官方文件和教程,進一步提升您的開發技能

結語

透過本指南,您已經在 macOS 和 Windows 上成功建立了 Flutter Android 應用程式開發環境。Flutter 的強大和靈活性將為您的移動應用開發帶來全新的體驗。記得經常更新您的 Flutter SDK 和相關工具,以獲得最新的功能和改進,保持您的開發環境始終處於最佳狀態。

祝您的 Flutter 開發之旅一切順利!如果在過程中遇到任何問題,別忘了查閱 Flutter 官方文件或尋求社群支援,讓我們一起在這個充滿創意的開發世界中探索更多可能性!

avatar-img
HKT實驗室
21會員
261內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
留言
avatar-img
留言分享你的想法!
HKT實驗室 的其他內容
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。