建立一個新的 Flutter 應用
瞭解如何透過命令列、各種編輯器甚至雲端來引導建立一個新的 Flutter 應用程式。
本頁提供了在您首選的開發環境中引導建立新 Flutter 應用的分步說明。
要建立新的 Flutter 應用,請先安裝並配置 Flutter,然後選擇您首選的環境並按照相應的說明操作。
無需離開 VS Code 即可建立新的 Flutter 應用。
無需離開 Android Studio 即可建立新的 Flutter 應用。
無需離開基於 IntelliJ 的 IDE 即可建立新的 Flutter 應用。
如需智慧編碼支援,可在 Antigravity 中建立新的 Flutter 應用。
為了獲得最大的靈活性,可透過命令列建立新的 Flutter 應用。
建立一個新的 Flutter 模組以嵌入到現有應用程式中。
VS Code
#要使用 VS Code 和其他基於 Code OSS 的編輯器建立 Flutter 應用,您首先需要安裝 Flutter 併為 Flutter 開發配置 VS Code。然後按照以下步驟操作:
啟動 VS Code
開啟 VS Code 或您首選的基於 Code OSS 的編輯器。
-
開啟命令面板
轉到檢視>命令面板或按Cmd/Ctrl + Shift + P。
-
查詢 Flutter 命令
在命令面板中,開始輸入
flutter:。VS Code 應會顯示來自 Flutter 外掛的命令。 -
執行新建專案命令
選擇 Flutter: New Project 命令。您的作業系統或 VS Code 可能會請求訪問您的文件,請同意以繼續下一步。
-
選擇模板
VS Code 應會提示您 Which Flutter template?(選擇 Flutter 模板)。根據您要建立的 Flutter 專案型別,選擇相應的模板。對於新的 Flutter 應用,請選擇 Application。
-
選擇專案位置
此時應出現一個檔案對話方塊。選擇或建立您希望存放專案的父目錄。請勿手動建立專案資料夾本身,Flutter 工具會自動建立它。點選 Select a folder to create the project in 以確認您的選擇。
-
輸入專案名稱
VS Code 應會提示您輸入新專案的名稱。請根據 Effective Dart 指南,輸入符合
lowercase_with_underscores(小寫加下劃線)命名規範的應用名稱。按 Enter 確認。 -
等待專案初始化
根據您輸入的資訊,VS Code 會使用
flutter create來引導建立您的應用。進度通常會作為右下角的通知顯示,也可以從 Output(輸出)面板中檢視。 -
執行你的應用
您的新應用現在應該已建立並在 VS Code 中開啟。要嘗試您的新應用,請按照 VS Code 執行和除錯中的步驟操作。
您已成功在 VS Code 中建立了新的 Flutter 應用!如果需要更多關於在 VS Code 中進行 Flutter 開發的幫助,請檢視 VS Code Flutter 開發參考。
Android Studio
#要使用 Android Studio 建立 Flutter 應用,您首先需要安裝 Flutter 併為 Flutter 開發配置 Android Studio。然後按照以下步驟操作:
-
啟動 Android Studio
開啟安裝了 Dart 和 Flutter 外掛的 Android Studio。
-
開始建立專案
如果您處於顯示 Welcome to Android Studio 的 IDE 歡迎對話方塊中,請找到並點選中間的 New Flutter Project 按鈕。
如果您已經打開了一個專案,請將其關閉,或轉到 File > New > New Flutter Project...。
-
選擇專案型別
在 New Project 對話方塊中,選擇左側面板 Generators 下的 Flutter。
-
驗證 Flutter SDK 設定
在右側面板頂部,確保 Flutter SDK path 的值與您想要用於開發的 Flutter SDK 位置一致。如果不是,請透過選擇或指定正確的路徑來更新它。
-
配置您的專案
點選 Next 繼續進行專案配置。此時應出現多個配置選項。
在 Project name 欄位中,輸入一個符合 Effective Dart 指南中
lowercase_with_underscores命名規範的應用名稱。如果您不是在建立應用程式,請從 Project type 下拉選單中選擇另一個模板。
如果您正在建立一個將來可能會發布的應用,請將 Organization 欄位設定為您的公司域名。
其他欄位可以保持原樣,也可以根據專案的需要進行配置。
-
完成專案建立
完成專案配置後,點選 Create 開始專案初始化。
-
等待工作空間初始化
Android Studio 現在將初始化您的工作空間,引導建立專案檔案結構,並檢索應用的依賴項。這可能需要一些時間,可以在視窗底部跟蹤進度。
-
執行你的應用
您的新應用現在應該已建立並在 Android Studio 中開啟。要嘗試您的新應用,請按照 Android Studio 執行和除錯中的步驟操作。
您已成功在 Android Studio 中建立了新的 Flutter 應用!如果需要更多關於在 Android Studio 中進行 Flutter 開發的幫助,請檢視 Android Studio Flutter 開發參考。
IntelliJ
#要使用 IntelliJ 或其他 JetBrains IDE 建立 Flutter 應用,您首先需要安裝 Flutter 併為 Flutter 開發配置 IntelliJ。然後按照以下步驟操作:
-
啟動 IntelliJ
開啟安裝了 Dart 和 Flutter 外掛的 IntelliJ IDEA 或您首選的 JetBrains IDE。
-
開始建立專案
如果您處於顯示 Welcome to IntelliJ IDEA 的 IDE 歡迎對話方塊中,請找到並點選右上角的 New Project 按鈕。
如果您已經打開了一個專案,請將其關閉,或轉到 File > New > New Project...。
-
選擇專案型別
在 New Project 對話方塊中,選擇左側面板 Generators 下的 Flutter。
-
驗證 Flutter SDK 設定
在右側面板頂部,確保 Flutter SDK path 的值與您想要用於開發的 Flutter SDK 位置一致。如果不是,請透過選擇或指定正確的路徑來更新它。
-
配置您的專案
點選 Next 繼續進行專案配置。此時應出現多個配置選項。
在 Project name 欄位中,輸入一個符合 Effective Dart 指南中
lowercase_with_underscores命名規範的應用名稱。如果您不是在建立應用程式,請從 Project type 下拉選單中選擇另一個模板。
如果您正在建立一個將來可能會發布的應用,請將 Organization 欄位[設定為您的公司域名][ij-set-org]。
其他欄位可以保持原樣,也可以根據專案的需要進行配置。
-
完成專案建立
完成專案配置後,點選 Create 開始專案初始化。
-
等待工作空間初始化
IntelliJ 現在將初始化您的工作空間,引導建立專案檔案結構,並檢索應用的依賴項。這可能需要一些時間,可以在視窗底部跟蹤進度。
-
執行你的應用
您的新應用現在應該已建立並在 IntelliJ 中開啟。要嘗試您的新應用,請按照 IntelliJ 執行和除錯中的步驟操作。
您已成功在 IntelliJ 中建立了新的 Flutter 應用!如果需要更多關於在 IntelliJ 中進行 Flutter 開發的幫助,請檢視 IntelliJ Flutter 開發參考。
反重力
#要使用 Antigravity 建立 Flutter 應用,您首先需要按照 Antigravity 工具頁面上的說明安裝並配置 Antigravity。然後按照以下步驟操作:
-
開啟 Antigravity 並建立工作空間
啟動 Antigravity IDE,並使用 Agent Manager 為您的專案建立一個新的沙盒工作空間。
-
使用 Agent Manager
切換到 Agent Manager 介面,您可以透過聊天與 AI 智慧體進行互動。
-
編寫詳細的提示詞
向智慧體詳細地描述您的應用需求,就像給初級開發人員下達指令一樣。例如:“建立一個名為 my_app 的新 Flutter 專案。新增一個帶有列表項和浮動操作按鈕的主螢幕”。
-
檢視並批准計劃
AI 智慧體將生成一份詳細的實施計劃,包括資料夾結構、依賴項和步驟。您可以檢視此計劃並點選 Proceed(繼續),或者提供反饋以進行修改。
-
授權操作
智慧體在執行終端命令(如
flutter pub add或flutter create)或訪問瀏覽器/模擬器之前會徵求您的許可。檢視並 Accept(接受)這些操作,以允許智慧體構建應用。 -
迭代與完善
初始應用生成後,您可以提供進一步的提示詞來新增功能、最佳化 UI、實現邏輯或新增持久化儲存(例如,“使用 shared_preferences 新增本地儲存”)。
-
測試應用
使用整合的模擬器或連線物理裝置來測試應用。智慧體甚至可以執行測試並提供功能的影片演練。
-
在編輯器中驗證程式碼
您可以隨時切換到標準程式碼編輯器檢視,以檢查生成的 Dart 和 Flutter 檔案,確保程式碼質量符合您的標準。
終端
#要透過終端建立 Flutter 應用,您首先需要安裝並配置 Flutter。然後按照以下步驟操作:
-
開啟終端
開啟您首選的命令列工具,例如 macOS 上的 Terminal 或 Windows 上的 PowerShell。
-
導航到目標目錄
確保當前工作目錄是您想要放置新應用的父目錄。請勿手動建立專案資料夾,
flutter工具會自動完成。 -
配置專案建立
在終端中,輸入
flutter create命令,並傳入您想要的標誌和選項來配置專案。例如,要建立一個帶有精簡main.dart檔案的應用,可以新增--empty選項。flutter create --empty要了解可用的建立選項,請在另一個終端視窗中執行
flutter create --help。 -
輸入專案名稱
作為
flutter create的唯一非選項引數,指定應用程式的目錄和預設名稱。名稱應根據 Effective Dart 指南遵循lowercase_with_underscores命名規範。例如,如果您想建立一個名為
my_app的應用flutter create my_app -
執行配置好的命令
要根據指定的配置建立專案,請執行您在上一步中構建的命令。
-
等待專案初始化
flutter工具現在將引導構建專案的檔案結構並檢索任何必要的依賴項。這可能需要一段時間。 -
進入專案目錄
專案建立完成後,您可以在終端或首選編輯器中進入該目錄。例如,在 bash shell 中,對於名為
my_app的專案cd my_app -
執行你的應用
要嘗試您的新應用,請在終端中執行
flutter run命令,並根據提示選擇輸出裝置。
您已成功在終端中建立了新的 Flutter 應用!如果需要配置專案的幫助或關於 flutter 命令列工具的問題,請檢視 Flutter CLI 參考。