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

【Flutter 學習筆記】線上課程教學影片：連結

【Flutter 學習筆記】系列文章目錄：連結

今天，我們將一起探索如何建立第一個 Flutter 應用程式。在之前的課程中，我們已經介紹了 Flutter 的開發環境、推薦的程式碼編輯器、Flutter SDK 的安裝與設定、環境參數的手動配置，以及如何設置 Android 和 iOS 模擬器。如果你還沒有看過這些內容，建議可以先回顧一下筆者為大家準備的入門教學影片。

建立第一個 Flutter 應用程式

如何建立第一個 Flutter 應用程式。首先，請打開 Visual Studio Code，然後啟動命令面板。對於 Windows 使用者，可以按下 Ctrl + Shift + P，而 Mac 使用者則可以按下 Command + Shift + P。接著，在中間的輸入框中輸入 >，然後輸入 Flutter，當智慧提示出現時，選擇 Flutter: New Project。

接下來，選擇專案類型，這裡我們選擇 Application，然後按下 Enter。接著，你需要設定專案的存放位置，我將專案存放在桌面的 demo 資料夾中，並將專案名稱設定為 flutter_application_1。按下 Enter 後，IDE 會自動建立專案的資料夾結構，這可能需要一些時間，特別是如果你的電腦效能較低。

運行應用程式

專案建立完成後，IDE 會自動開啟專案。在左側的檔案總管中，你可以看到專案的相關程式文件結構。接下來，點擊左側的 Flutter 圖示，這樣你就可以看到目前的 Devices 清單。

在 iOS 模擬器上運行

如果你想在 iOS 模擬器上運行應用程式，首先需要開啟 Xcode，然後在工具列中選擇 Xcode > Open Developer Tool > Simulator。如果你不確定如何建立 iOS 模擬器，可以參考之前的教學影片。當 iOS 模擬器成功開啟後，你會在 Devices 清單中看到它。點擊 iOS 模擬器，然後點擊執行與偵錯的圖示，接著選擇藍色的執行與偵錯按鈕，等待編譯完成。如果一切順利，你的第一個 Flutter 應用程式就會在 iOS 模擬器上運行。

在 Android 模擬器上運行

如果你想在 Android 模擬器上運行，首先需要開啟 Android Studio。在歡迎畫面中選擇 more actions，然後選擇 Virtual Device Manager。在模擬器裝置列表中，選擇運行 Pixel 8a 模擬器。當模擬器開啟後，同樣在 Devices 清單中找到它，點擊 Android 模擬器，然後執行與偵錯的圖示，接著選擇藍色的執行與偵錯按鈕，等待編譯完成。如果成功，你的應用程式就會在 Android 模擬器上運行。

在真實設備上運行

如果你想在真實的 Android 或 iPhone 手機上進行測試，請參考之前的教學影片以了解如何進行設定。

建立 Web 應用程式

如果你想建立 Web 應用程式，可以在 Devices 清單中選擇 Chrome，然後點擊執行與偵錯的圖示，接著選擇藍色的執行與偵錯按鈕，等待編譯完成。如果一切順利，你的應用程式就會在 Chrome 瀏覽器上運行。

建立桌面應用程式

如果你想建立 macOS 或 Windows 桌面應用程式，選擇相應的選項，然後點擊執行與偵錯的圖示，接著選擇藍色的執行與偵錯按鈕，等待編譯完成。成功後，你的應用程式就會在相應的桌面環境中運行。

結語

恭喜你！現在你已經成功建立並運行了你的第一個 Flutter 應用程式。這是一個重要的里程碑，標誌著你在 Flutter 開發之路上的第一步。無論你是想開發移動應用程式、Web 應用程式還是桌面應用程式，Flutter 都提供了強大的工具和靈活性，讓你能夠輕鬆實現你的想法。

接下來，你可以開始探索 Flutter 的更多功能，例如使用不同的 Widget 來構建用戶界面、管理狀態、與後端服務進行通訊等。

如果你在開發過程中遇到任何問題，別忘了尋求幫助。Flutter 社區非常活躍，無論是在 Stack Overflow、GitHub 還是社交媒體上，你都能找到許多熱心的開發者願意分享他們的經驗和解決方案。

最後，持續練習是提升技能的關鍵。嘗試建立不同類型的應用程式，挑戰自己解決更複雜的問題，這樣你將能夠更快地成長為一名熟練的 Flutter 開發者。