Flutter 安裝教學（Windows）｜從 0 開始打造跨平台 App 開發環境

Yuna-avatar-img
Yuna
更新 發佈閱讀 7 分鐘

在講求高效率與跨平台整合的現代開發趨勢下，Flutter 成為許多工程師的首選框架。透過「單一程式碼」，即可同時開發 Android、iOS、Web 與桌面應用程式，大幅降低維護成本與開發時間。

為什麼選擇 Flutter？

優點整理

  • ✅ 跨平台開發（一次撰寫，多平台執行）
  • ✅ Hot Reload 即時編譯，大幅提升開發效率
  • ✅ UI 客製彈性高
  • ✅ 生態系完整、社群活躍

一、安裝 Flutter

1. 下載 Flutter SDK

請前往官方版本下載頁面：

https://docs.flutter.dev/release/archive

i. 選擇 Stable（穩定版）

raw-image

ii. 下載 Windows 壓縮檔，完成後進行解壓縮

raw-image

2. 放置 Flutter 資料夾

建議放在簡單路徑，避免中文或空格。

示範路徑

C:\src\flutter

操作流程

i. 進入 C 槽的 src 資料夾

raw-image

ii. 將解壓縮後的 flutter 資料夾移至 src 裡面

raw-image

二、設定環境變數

讓系統能在任何地方執行 flutter 指令。

設定步驟

1. 搜尋「環境變數」，並開啟「編輯系統環境變數」

raw-image

2. 選擇「進階」，並點選「環境變數」

raw-image

3. 複製 Flutter 資料夾中的 bin 路徑

raw-image

4. 在「系統變數」中找到 Path → 點選編輯

raw-image

5. 新增以下路徑（bin 目錄）

C:\src\flutter_windows_3.24.4-stable\flutter\bin
raw-image

6. 點擊「確定」儲存

raw-image

三、安裝 VS Code

1️. 下載 VS Code

https://code.visualstudio.com/

raw-image

下載後直接安裝即可。

2. 下載好後，打開，點選「我同意」，接著點選「下一步」

raw-image
raw-image

📚 延伸閱讀（完整圖文教學）

如果想看更詳細的安裝流程與畫面說明，可以參考以下文章：

建議安裝完成後，同步設定常用擴充套件，能大幅提升開發效率與專案維護品質。

3. 測試 Flutter 是否成功

開啟 VS Code → 開啟終端機，輸入：

flutter devices

若能顯示裝置列表，代表安裝成功。

raw-image
raw-image
raw-image

四、建立並執行 Flutter 專案

1️. 建立專案

flutter create my_app
raw-image

2️. 進入專案資料夾

cd my_app
raw-image

3️. 使用 Chrome 執行

flutter run -d chrome

若成功，瀏覽器會自動開啟範例畫面。

raw-image
raw-image

五、安裝 Android Studio

若要開發 Android App，需安裝 Android Studio。

1. 下載 Android Studio

https://developer.android.com/studio

raw-image
raw-image

安裝流程

2. 下載後開啟安裝程式，一路點選「Next」

raw-image
raw-image
raw-image
raw-image

3. 安裝完成後點擊「Finish」

raw-image

4. 點擊「Finish」後，一路選「Next」

raw-image
raw-image
raw-image
raw-image
raw-image
raw-image

5. 安裝完成後的畫面

raw-image

六、檢查 Android 設定

回到 VS Code 終端機輸入：

flutter doctor
raw-image
raw-image

若出現 Android tool 未安裝，請依照以下步驟補裝。

raw-image

補安裝 Android SDK Command-line Tools

1. 開啟 Android Studio，點選「More Actions」→ SDK Manager

raw-image

​2. 切換至「SDK Tools」，勾選 Android SDK Command-line Tools (latest)，點擊 OK 下載

raw-image
raw-image
  • 開始下載畫面
raw-image

3. 完成後，點擊「Finish」

raw-image

4. 完成後再次執行，確認 Android SDK Command-line Tools (latest) 是否安裝完成

flutter doctor
raw-image

七、解決 Android licenses not accepted 問題

若出現此錯誤，請執行：

flutter doctor --android-licenses
raw-image
raw-image

1. 依序按 y 同意條款（通常約 5 次）。

raw-image

2. 接著再輸入以下指令，檢查有沒有安裝成功 (以下為「問題成功排除」畫面)

flutter doctor
raw-image

八、建立 Android 虛擬裝置

1. Android Studio → 點選「More Actions」→ Virtual Device Manager

raw-image

2. 建立新裝置

raw-image

3. 選擇手機型號

raw-image
raw-image
raw-image

4. 安裝 HAXM

raw-image
raw-image
raw-image
raw-image
raw-image

5. 啟動模擬器 (手機)

raw-image

九、安裝 Flutter 與 Dart 套件（VS Code）

1. 開啟 VS Code，搜尋「Flutter」並安裝套件（會自動包含 Dart）

flutter
raw-image

使用 GUI 建立專案

1. 點選 View → Command Palette

raw-image
raw-image

2. 搜尋「Flutter New Project」

Flutter New Project
raw-image
raw-image

3. 建立資料夾

raw-image

4. 新建資料夾後，按 Enter

raw-image

按 F5執行專案

1. 選擇執行裝置

raw-image

2. 點擊「執行與偵錯」

raw-image

3. 成功後即可看到執行畫面

raw-image

十、若 VS Code 無法執行專案

可回到 Android Studio 操作：

1. 安裝 Flutter Plugin

raw-image

2. 安裝 Dart Plugin

raw-image

3. 重新啟動 Android Studio

raw-image

4. 開啟專案

raw-image
raw-image

5. 開啟 Device Manager

raw-image

6. 執行專案

raw-image

7. 可右鍵放大模擬器畫面

raw-image

8. 成功執行

raw-image

總結

完整建置 Flutter 開發環境包含：

  • Flutter SDK
  • 環境變數設定
  • VS Code
  • Android Studio
  • SDK Tools
  • Android Licenses
  • 虛擬裝置

完成以上流程後，即可正式開始打造 Android、Web 等應用程式。


















留言
avatar-img
Yuna
19會員
26內容數
歡迎來到我的部落格！這裡是個佛系經營的角落，我會在這裡分享我的學習及心路歷程，及不定時生活大小事分享，包括科技、閱讀、星座、金融、好物等。 希望分享的內容能夠幫助大家，與大家一同學習成長，無論是知識的豐富還是心靈的提升。歡迎留言、討論，分享你的看法和經驗。如文章內容有誤，請不吝指教，我會虛心接受並改進！ 什麼都發～
Yuna的其他內容
2026/03/03
【教學】Google 遠端桌面設定超簡單！3分鐘學會遠端存取電腦，提升工作效率
本文將引導你一步一步完成 Google 遠端桌面設定，讓你隨時隨地存取不同裝置上的檔案和應用程式，大幅提升工作效率。從前往官方網站、啟用遠端存取、設定電腦名稱與安全 PIN 碼，到實際連線，所有步驟都詳盡說明。同時提供安全使用建議與常見應用情境。
Thumbnail
2026/03/03
【教學】Google 遠端桌面設定超簡單！3分鐘學會遠端存取電腦，提升工作效率
本文將引導你一步一步完成 Google 遠端桌面設定，讓你隨時隨地存取不同裝置上的檔案和應用程式，大幅提升工作效率。從前往官方網站、啟用遠端存取、設定電腦名稱與安全 PIN 碼，到實際連線，所有步驟都詳盡說明。同時提供安全使用建議與常見應用情境。
Thumbnail
2026/03/02
Git 安裝教學（2026 最新版）：從下載到設定 main 分支，新手 10 分鐘搞定
想學 Git 卻不知道怎麼開始嗎？本篇完整教學帶你從 Git 官方網站下載、Windows 安裝流程、預設 main 分支設定，到終端機基本身份配置一次搞懂。並加碼介紹 VS Code 推薦套件與介面中文化設定，幫助你快速建立專業開發環境。新手也能輕鬆上手，10 分鐘完成 Git 安裝與基礎設定
Thumbnail
2026/03/02
Git 安裝教學（2026 最新版）：從下載到設定 main 分支，新手 10 分鐘搞定
想學 Git 卻不知道怎麼開始嗎？本篇完整教學帶你從 Git 官方網站下載、Windows 安裝流程、預設 main 分支設定，到終端機基本身份配置一次搞懂。並加碼介紹 VS Code 推薦套件與介面中文化設定，幫助你快速建立專業開發環境。新手也能輕鬆上手，10 分鐘完成 Git 安裝與基礎設定
Thumbnail
2026/02/23
TypeScript 靜態檢查：重構的順序與時機，提升程式碼品質的利器
本文探討 TypeScript 的靜態檢查機制，釐清其核心優勢與侷限性，並提出重構時的關鍵步驟與 TypeScript 與 ESLint 的協同作用。強調 TypeScript 能賦予開發者重構的勇氣，並使程式碼本身成為更佳的文件，從而提升開發效率與程式碼品質。
2026/02/23
TypeScript 靜態檢查：重構的順序與時機，提升程式碼品質的利器
本文探討 TypeScript 的靜態檢查機制，釐清其核心優勢與侷限性，並提出重構時的關鍵步驟與 TypeScript 與 ESLint 的協同作用。強調 TypeScript 能賦予開發者重構的勇氣，並使程式碼本身成為更佳的文件，從而提升開發效率與程式碼品質。
看更多
你可能也想看
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。
#釀電影#釀評論#藝術評論
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。
#釀電影#釀評論#藝術評論
Thumbnail
avatar-avatar
趙鐸的沙龍
柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望
柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。
#2026北藝嚴選#臺北表演藝術中心#北藝嚴選
Thumbnail
avatar-avatar
趙鐸的沙龍
柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望
柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。
#2026北藝嚴選#臺北表演藝術中心#北藝嚴選
Thumbnail
avatar-avatar
花神沒有咖啡館的沙龍
《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
花神沒有咖啡館的沙龍
《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
涵柳的沙龍
《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生
《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
涵柳的沙龍
《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生
《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
Josh的沙龍
Google Antigravity安裝紀錄
Google Antigravity 是 Google 推出的新一代 IDE，為開發者提供了現代化的編程體驗和強大的 AI 助手功能。本文將詳細介紹如何在 Windows 系統上安裝 Google Antigravity，包括下載、安裝配置、編輯器主題選擇、快捷鍵設置，以及登入 Google 帳戶。
#Antigravity#Google#安裝
Thumbnail
avatar-avatar
Josh的沙龍
Google Antigravity安裝紀錄
Google Antigravity 是 Google 推出的新一代 IDE，為開發者提供了現代化的編程體驗和強大的 AI 助手功能。本文將詳細介紹如何在 Windows 系統上安裝 Google Antigravity，包括下載、安裝配置、編輯器主題選擇、快捷鍵設置，以及登入 Google 帳戶。
#Antigravity#Google#安裝
Thumbnail
avatar-avatar
Guigou Yu的沙龍
【教學】Bilibili 影片怎麼下載？這幾種方法最穩最方便（2025 最新）
B站（Bilibili）上有很多高品質的動漫、遊戲實況、UP主教學影片，但官方目前並不支援直接下載到電腦或手機，有時候想離線看真的很麻煩。那到底要怎麼下載 Bilibili 的影片呢？今天幫大家整理出幾個實用又安全的方法，讓你輕鬆備份想看的內容，也不怕哪天影片下架找不到！   方法一：使用 iM
#下載#網站#線上
Thumbnail
avatar-avatar
Guigou Yu的沙龍
【教學】Bilibili 影片怎麼下載？這幾種方法最穩最方便（2025 最新）
B站（Bilibili）上有很多高品質的動漫、遊戲實況、UP主教學影片，但官方目前並不支援直接下載到電腦或手機，有時候想離線看真的很麻煩。那到底要怎麼下載 Bilibili 的影片呢？今天幫大家整理出幾個實用又安全的方法，讓你輕鬆備份想看的內容，也不怕哪天影片下架找不到！   方法一：使用 iM
#下載#網站#線上
Thumbnail
avatar-avatar
蝦仁藥師_臨床輕鬆學的沙龍
如何下載與安裝 Android Studio：完整新手教學
一、Android Studio 是什麼？ Android Studio 是 Google 官方推出的 Android 應用程式開發整合式開發環境（IDE），支援 Kotlin、Java 與 C++ 等語言。它整合了程式編輯器、模擬器、測試工具與部署功能，是開發 Android App 的標準平台
#Apple Silicon#Android#作業系統
Thumbnail
avatar-avatar
蝦仁藥師_臨床輕鬆學的沙龍
如何下載與安裝 Android Studio：完整新手教學
一、Android Studio 是什麼？ Android Studio 是 Google 官方推出的 Android 應用程式開發整合式開發環境（IDE），支援 Kotlin、Java 與 C++ 等語言。它整合了程式編輯器、模擬器、測試工具與部署功能，是開發 Android App 的標準平台
#Apple Silicon#Android#作業系統
Thumbnail
avatar-avatar
快門手
【資安警示更新】TradingView詐騙軟體流竄　請務必僅從官方網站下載安裝檔
近期加密貨幣與股票市場波動劇烈，帶動了 TradingView 使用需求的快速上升。 然而，也有詐騙集團趁勢而起，冒用 TradingView 名義製作假冒粉絲團、網站與廣告，聲稱可免費取得「完整版TradingView安裝檔」，甚至提供「破解」、「優化」、「特殊授權版」等誘人說詞，實則為惡意軟體
#反詐騙#TradingView#詐騙
Thumbnail
avatar-avatar
快門手
【資安警示更新】TradingView詐騙軟體流竄　請務必僅從官方網站下載安裝檔
近期加密貨幣與股票市場波動劇烈，帶動了 TradingView 使用需求的快速上升。 然而，也有詐騙集團趁勢而起，冒用 TradingView 名義製作假冒粉絲團、網站與廣告，聲稱可免費取得「完整版TradingView安裝檔」，甚至提供「破解」、「優化」、「特殊授權版」等誘人說詞，實則為惡意軟體
#反詐騙#TradingView#詐騙
Thumbnail
avatar-avatar
RPAI 數位優化器
【2025 最新教學】Power Automate 安裝全攻略｜免費下載微軟 RPA 工具入門指南
Power Automate 是微軟推出的免費 RPA 工具，不需寫程式也能輕鬆自動化日常流程。這篇 2025 年最新版安裝教學，將一步步帶你完成 Power Automate 的下載與設定，適合所有剛入門的初學者，快速掌握流程自動化關鍵技巧！
#RPAI數位優化器#數位轉型#RPA
Thumbnail
avatar-avatar
RPAI 數位優化器
【2025 最新教學】Power Automate 安裝全攻略｜免費下載微軟 RPA 工具入門指南
Power Automate 是微軟推出的免費 RPA 工具，不需寫程式也能輕鬆自動化日常流程。這篇 2025 年最新版安裝教學，將一步步帶你完成 Power Automate 的下載與設定，適合所有剛入門的初學者，快速掌握流程自動化關鍵技巧！
#RPAI數位優化器#數位轉型#RPA
Thumbnail
avatar-avatar
Jie-Yi
Windows11 安裝 24H2 繞過硬體限制
簡介: 由於舊硬體因無支援TPM2.0 或 CPU不支援，導致無法更新成Windows11。          即便已透過舊方法更新成Windows11，目前此方法也不適用於新版的24H2，          以下可以透過兩種方式執行系統的更新。 🔗23H2 安裝繞過硬體限制偵測 方法一
#Windows11#windows#作業系統
Thumbnail
avatar-avatar
Jie-Yi
Windows11 安裝 24H2 繞過硬體限制
簡介: 由於舊硬體因無支援TPM2.0 或 CPU不支援，導致無法更新成Windows11。          即便已透過舊方法更新成Windows11，目前此方法也不適用於新版的24H2，          以下可以透過兩種方式執行系統的更新。 🔗23H2 安裝繞過硬體限制偵測 方法一
#Windows11#windows#作業系統
Thumbnail
avatar-avatar
の倉的程式小天地
不再迷茫！手把手的Python入門教學-下載、安裝IDE
本文介紹 Python 的基本概念，並提供安裝指南，幫助初學者快速掌握這門流行的程式語言。內容包括 Python 的設計哲學、安裝步驟以及可用的整合開發環境（IDE）。透過簡單易懂的方式，您將能夠開始撰寫 Python 程式，並享受程式設計的樂趣。
#Windows#程式#安裝
Thumbnail
avatar-avatar
の倉的程式小天地
不再迷茫！手把手的Python入門教學-下載、安裝IDE
本文介紹 Python 的基本概念，並提供安裝指南，幫助初學者快速掌握這門流行的程式語言。內容包括 Python 的設計哲學、安裝步驟以及可用的整合開發環境（IDE）。透過簡單易懂的方式，您將能夠開始撰寫 Python 程式，並享受程式設計的樂趣。
#Windows#程式#安裝
Thumbnail
avatar-avatar
Simon 老師的電腦知行工房的沙龍
Oracle Virtual Machine VirtualBox下載與安裝
●Oracle VM(Virtual Machine) VirtualBox 功能：開放原始碼的虛擬機器軟體，所謂的虛擬機器，是一種可以在一般電腦平台中與使用者之間建立的一個環境，使用者透過虛擬機器建立的環境來操作其軟體。
#作業系統#安裝#下載
Thumbnail
avatar-avatar
Simon 老師的電腦知行工房的沙龍
Oracle Virtual Machine VirtualBox下載與安裝
●Oracle VM(Virtual Machine) VirtualBox 功能：開放原始碼的虛擬機器軟體，所謂的虛擬機器，是一種可以在一般電腦平台中與使用者之間建立的一個環境，使用者透過虛擬機器建立的環境來操作其軟體。
#作業系統#安裝#下載
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News