【2025 夏日精選-7】安裝 Flutter SDK 與認識 Dart

更新 發佈閱讀 5 分鐘
因為現在流行各種跨平台的東東,加上又是人手一機的時代,所以就來學一下怎麼做手機程式吧!

🔍 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

raw-image

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


raw-image

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


raw-image

然後你就會發現出現了好幾個紅色叉叉🫠這些異常都需要一一排除


排除病灶

這個部分因為篇幅實在是太長了,所以直接開一個新的文章,處理的問題大概有

    1. Unable to locate Android SDK
    2. cmdline-tools component is missing
    3. Android license status unknown
    4. 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 變數就可以讓系統知道在哪裡找到可執行檔,這樣就可以在命令提示字元中直接執行程式,而不需要輸入完整的路徑


  • 如何設定環境變數?

先在電腦內搜尋 編輯系統環境變數 這個東西,然後點進去,就會進到下面那張圖

raw-image


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

raw-image


接著在 PATH 點兩下進入編輯

raw-image


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

raw-image

然後你會發現在 CMD 也可以用 flutter 指令了!




今天已經講太多了,明天再來看看這東西到底要怎麼用吧!

如果喜歡我的文章。也別忘了幫我按個讚喔😊

留言
avatar-img
の倉的程式小天地
6會員
32內容數
熱愛做志工的大學生 誤打誤撞跑去讀資管系 既然來到了資管系,那就學習新技能來幫助他人
2025/07/26
本篇在排除各種問題 Unable to locate Android SDK cmdline-tools component is missing Android license status unknown Visual Studio is missing necessary components
Thumbnail
2025/07/26
本篇在排除各種問題 Unable to locate Android SDK cmdline-tools component is missing Android license status unknown Visual Studio is missing necessary components
Thumbnail
2025/07/20
我們昨天下載的資料集比較完整,已經幫我們分好了訓練、驗證、測試用的資料集,但是如果今天真的遇到一大筆資料集的話該怎麼分割?
Thumbnail
2025/07/20
我們昨天下載的資料集比較完整,已經幫我們分好了訓練、驗證、測試用的資料集,但是如果今天真的遇到一大筆資料集的話該怎麼分割?
Thumbnail
2025/07/16
大家都知道,訓練一個完整的模型需要上萬筆資料,而資料的取得往往是最令人頭痛的地方 在知道如何下載前,先來談談「資料集 (Dataset)」這個東西 顧名思義,資料集就是指資料的集合,而且最重要的是要能在電腦中處理...
Thumbnail
2025/07/16
大家都知道,訓練一個完整的模型需要上萬筆資料,而資料的取得往往是最令人頭痛的地方 在知道如何下載前,先來談談「資料集 (Dataset)」這個東西 顧名思義,資料集就是指資料的集合,而且最重要的是要能在電腦中處理...
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本課程學習如何提取共同屬性,透過 Style 樣式包,套用至每個按鈕。來提升佈局的可讀性和好維護性。
Thumbnail
本課程學習如何提取共同屬性,透過 Style 樣式包,套用至每個按鈕。來提升佈局的可讀性和好維護性。
Thumbnail
本課程學習如何如何實作計算機介面,佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件,調整背景色。透過 GridLayout 佈局計算機按鈕。
Thumbnail
本課程學習如何如何實作計算機介面,佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件,調整背景色。透過 GridLayout 佈局計算機按鈕。
Thumbnail
有沒有想過,即使沒有任何編程背景,你的創意也能在六個月內轉化成真實的App?我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助,這一切都是可能的!你一行 code 都不需要打,甚至也無須學習任何編程語言!沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了!
Thumbnail
有沒有想過,即使沒有任何編程背景,你的創意也能在六個月內轉化成真實的App?我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助,這一切都是可能的!你一行 code 都不需要打,甚至也無須學習任何編程語言!沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了!
Thumbnail
本課程學習如何在 Kotlin 程式碼檔案中,設定 ImageView 圖片元件,顯示本地端圖片。
Thumbnail
本課程學習如何在 Kotlin 程式碼檔案中,設定 ImageView 圖片元件,顯示本地端圖片。
Thumbnail
本課程學習如何使用 Android Studio 建立的第一個應用程式專案:Hello World。
Thumbnail
本課程學習如何使用 Android Studio 建立的第一個應用程式專案:Hello World。
Thumbnail
本篇文章將介紹開發 Android 手機應用程式所需的開發軟體,Google 官方的開發工具 Android Studio。這款軟體不僅免費,還提供完整的支援,適合所有 Android 開發者使用。
Thumbnail
本篇文章將介紹開發 Android 手機應用程式所需的開發軟體,Google 官方的開發工具 Android Studio。這款軟體不僅免費,還提供完整的支援,適合所有 Android 開發者使用。
Thumbnail
根據初學者設計了 Kotlin 程式語言的基礎課程,從 Android Studio 到 Android App 開發,提供完整指引。由基礎開始,傳授開發技巧。課程分為三部分:環境安裝、常用元件與界面設計,以及高階技巧如 DataStore、Room 資料儲存與網路處理。
Thumbnail
根據初學者設計了 Kotlin 程式語言的基礎課程,從 Android Studio 到 Android App 開發,提供完整指引。由基礎開始,傳授開發技巧。課程分為三部分:環境安裝、常用元件與界面設計,以及高階技巧如 DataStore、Room 資料儲存與網路處理。
Thumbnail
Kotlin 是 Google 官方推薦的 Android 開發語言,具有簡潔、安全、高效等優點,受到越來越多開發者的青睞。如果你也想學習 Kotlin,卻不知道從哪裡開始,那麼這本【Kotlin 入門指南】就是你的最佳選擇。
Thumbnail
Kotlin 是 Google 官方推薦的 Android 開發語言,具有簡潔、安全、高效等優點,受到越來越多開發者的青睞。如果你也想學習 Kotlin,卻不知道從哪裡開始,那麼這本【Kotlin 入門指南】就是你的最佳選擇。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News