【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
留言分享你的想法!
avatar-img
の倉的程式小天地
6會員
31內容數
熱愛做志工的大學生 誤打誤撞跑去讀資管系 既然來到了資管系,那就學習新技能來幫助他人
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
# 簡介 身為一位專注於 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 開發者使用。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News