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

【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. 顯示除錯主控台：如果沒有顯示除錯主控台，可以點選右上角的按鈕來開啟它。