【Flutter 學習筆記】如何建立第一個 Dart 應用程式

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

今天我們將一起探索如何使用 Visual Studio Code 來建立我們的第一個 Dart 應用程式,並且了解為什麼學習 Dart 程式語言對於 Flutter 開發是如此重要。

為什麼要學 Dart 程式語言?

Flutter 是一個開源的跨平台框架,主要使用 Dart 程式語言進行開發。這意味著,如果我們想要利用 Flutter 的強大功能來開發跨平台的應用程式,掌握 Dart 程式語言是不可或缺的。對於開發者來說,學會 Dart 將能夠充分發揮 Flutter 的潛力,讓我們的應用程式更加出色。

環境準備

在之前的課程中,我們已經介紹了如何安裝 Visual Studio Code、安裝與設定 Flutter SDK,以及如何手動配置 Flutter 環境參數。如果你還沒有看過這些內容,建議你回去補課,因為這些都是建立 Dart 應用程式的基礎。

值得一提的是,如果你已經安裝了 Flutter SDK,那麼 Dart SDK 會自動包含在內,因此不需要單獨安裝。

開始建立 Dart 應用程式

接下來,我們就進入今天的主題,如何使用 Visual Studio Code 來建立第一個 Dart 應用程式。

  1. 開啟 Visual Studio Code:首先,啟動你的 Visual Studio Code 編輯器。
  2. 開啟命令面板:你可以使用快速鍵來開啟命令面板,Windows 使用者,可以按下 Ctrl + Shift + P,而 Mac 使用者則可以按下 Command + Shift + P,或是直接用滑鼠點選中間的輸入框,輸入「>」大於符號。
  3. 建立新專案:在輸入框中輸入 Dart,然後選擇 Dart: New Project。接著,選擇專案範本,這裡我們選擇 Console Application,這是命令列應用程式的範本。
  4. 設定專案位置與名稱:接下來,設定專案的存放位置(例如桌面的 demo 資料夾),並將專案名稱設為 dart_application,然後按下 Enter。
  5. 等待專案建立:此時,Visual Studio Code 會自動建立專案的相關資料夾結構,稍等片刻,直到 IDE 自動開啟我們的專案。
  6. 檢視專案結構:在左側的檔案總管面板中,你可以看到專案的程式文件結構,而右側則是程式編輯區,未來我們將在這裡撰寫程式碼。
  7. 編輯程式碼:預設會開啟 dart_application.dart 檔案。如果沒有自動開啟,你可以在檔案總管中找到它並點選開啟。這個檔案的副檔名為 .dart,代表它是使用 Dart 程式語言的檔案。
  8. 撰寫第一行程式碼:在程式編輯區中,我們將刪除預設的程式碼,然後輸入 main() 函數。你可以透過智慧提示快速建立 main() 函數,或是手動輸入:
    void main() {
    print("HKT線上教室");
    }
    記得使用雙引號包住你想要輸出的文字,並在結尾加上分號。
  9. 執行程式:在上方的選單中,選擇 Run,這樣 IDE 就會編譯並執行我們的程式碼。下方的偵錯主控台會顯示程式碼的執行結果,應該會印出 HKT線上教室
  10. 顯示除錯主控台:如果沒有顯示除錯主控台,可以點選右上角的按鈕來開啟它。
留言
avatar-img
留言分享你的想法!
avatar-img
HKT實驗室
23會員
261內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
HKT實驗室的其他內容
2024/11/18
在 Dart 程式語言中,除了位置參數和預設參數值外,具名參數的使用讓函式的呼叫變得更加清晰且易於理解。特別是在參數較多的情況下,具名參數的優勢尤為明顯。本篇文章將深入探討如何定義和使用具名參數,並透過實際範例來加深讀者的理解。
Thumbnail
2024/11/18
在 Dart 程式語言中,除了位置參數和預設參數值外,具名參數的使用讓函式的呼叫變得更加清晰且易於理解。特別是在參數較多的情況下,具名參數的優勢尤為明顯。本篇文章將深入探討如何定義和使用具名參數,並透過實際範例來加深讀者的理解。
Thumbnail
2024/11/17
在 Dart 程式語言中,函式不僅可以接收參數,還能為這些參數設定預設值。這樣的設計使得函式的呼叫更加靈活,並且簡化了程式碼的撰寫。本文將深入探討如何定義具有預設參數值的函式,並透過實際範例來加深理解。
Thumbnail
2024/11/17
在 Dart 程式語言中,函式不僅可以接收參數,還能為這些參數設定預設值。這樣的設計使得函式的呼叫更加靈活,並且簡化了程式碼的撰寫。本文將深入探討如何定義具有預設參數值的函式,並透過實際範例來加深理解。
Thumbnail
2024/11/16
在 Dart 程式語言中,函式不僅能執行特定任務,還能回傳值,這使得函式在程式中更具彈性和重用性。本篇文章將深入探討如何定義一個具有回傳值的函式,並透過實際範例來幫助大家理解其結構與用途。
Thumbnail
2024/11/16
在 Dart 程式語言中,函式不僅能執行特定任務,還能回傳值,這使得函式在程式中更具彈性和重用性。本篇文章將深入探討如何定義一個具有回傳值的函式,並透過實際範例來幫助大家理解其結構與用途。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
在這篇文章中,我們將一起學習如何建置 Windows 桌面應用程式的開發環境。安裝 Git for Windows 2.27 或更高版本。和 Visual Studio 2022(需選擇「Desktop development with C++」)。
Thumbnail
在這篇文章中,我們將一起學習如何建置 Windows 桌面應用程式的開發環境。安裝 Git for Windows 2.27 或更高版本。和 Visual Studio 2022(需選擇「Desktop development with C++」)。
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
介紹了在 Windows 和 macOS 上如何建置 Flutter Android 應用程式開發環境的方法。包括硬體需求、軟體需求、安裝開發工具、設置 Android 開發環境、驗證安裝及開始開發等步驟。
Thumbnail
介紹了在 Windows 和 macOS 上如何建置 Flutter Android 應用程式開發環境的方法。包括硬體需求、軟體需求、安裝開發工具、設置 Android 開發環境、驗證安裝及開始開發等步驟。
Thumbnail
介紹在 macOS 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 macOS 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
Thumbnail
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境
Thumbnail
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News