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

更新 發佈閱讀 5 分鐘
vocus|新世代的創作平台
【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 開發者。

留言
avatar-img
HKT實驗室
31會員
278內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
HKT實驗室的其他內容
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
看更多
你可能也想看
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
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
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
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
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 和 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
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News