因為現在流行各種跨平台的東東,加上又是人手一機的時代,所以就來學一下怎麼做手機程式吧!
🔍 Flutter 是什麼?
Flutter 是由 Google 推出的跨平台開發框架,只需使用一種語言(Dart)寫一次程式,就能同時部署在 iOS、Android、網頁(Web)和桌面平台上。大量節省開發時間,一份程式碼多平台通吃!
Flutter 之所以受到開發者青睞,主要因為以下幾點:
- 原生效能佳:透過 SDK 編譯成 native machine code,效能媲美原生 App
- UI 元件豐富:內建多樣化的元件(widget),就像堆積木一樣輕鬆打造界面
- 快速開發體驗:支援熱重載(Hot Reload),修改後立即重新編譯、預覽
💡 Dart 是什麼?
Dart 是 Google 為 UI 開發量身打造的程式語言,常被用於開發行動 App 和 Web 應用程式。它是一門物件導向語言,語法融合了 JavaScript、Java 和 C# 的風格,對有基礎的程式初學者來說,上手速度非常快
🧩 Flutter 和 Dart 的關係?
你可以把 Flutter 想成是開發工具箱(框架),內含豐富的 Library 和 UI 元件(widget);而 Dart 則是你寫程式的語言。兩者搭配就像 Python 和 Django、JavaScript 和 React 一樣,是一對開發好搭檔
所以別因為沒聽過 Dart 就退縮,其實它很親民,學會 Dart,你就能駕馭 Flutter,打造出漂亮又高效的 App!
下載 Flutter SDK
第一步就先來下載 Flutter SDK,請點以下連結:
https://docs.flutter.dev/get-started/install/windows/mobile

可以選擇用 VS code 安裝,還是直接下載安裝,裡面都有完整的教學可以參考,我這邊就是直接懶人下載XD

然後解壓縮之後點進去找到 flutter console,點兩下會出現一個類似命令提示字元的介面,然後就可以輸入 flutter doctor
檢查是否有出錯

然後你就會發現出現了好幾個紅色叉叉🫠這些異常都需要一一排除
排除病灶
這個部分因為篇幅實在是太長了,所以直接開一個新的文章,處理的問題大概有
- Unable to locate Android SDK
- cmdline-tools component is missing
- Android license status unknown
- Visual Studio is missing necessary components
詳細排除過程請看:
【2025 夏日精選-7.5】排除 flutter doctor 時遇到的各種問題 .2025新版 】
設定環境變數
- 先說說為什麼要設定環境變數?
我們現在只能在 flutter console 裡面使用 flutter
指令,在命令提示字元 (CMD) 上會顯示: 'flutter' 不是內部或外部命令、可執行的程式或批次檔。
這是因為沒有設定 PATH 變數的關係,對電腦來說,他沒辦法找到剛剛下載的 flutter 的二進位檔,也就是 /bin 資料夾,如果想要不設置環境變數就使用flutter
指令,就需要打上完整的路徑,例如:C:/[路徑]/flutter/bin/flutter doctor
而設定 PATH
變數就可以讓系統知道在哪裡找到可執行檔,這樣就可以在命令提示字元中直接執行程式,而不需要輸入完整的路徑
- 如何設定環境變數?
先在電腦內搜尋 編輯系統環境變數 這個東西,然後點進去,就會進到下面那張圖

然後按環境變數,就會進到底下

接著在 PATH 點兩下進入編輯

按"新增",打上你的 C:/[路徑]/flutter/bin
這串路徑,就可以囉!

然後你會發現在 CMD 也可以用 flutter 指令了!
今天已經講太多了,明天再來看看這東西到底要怎麼用吧!
如果喜歡我的文章。也別忘了幫我按個讚喔😊