跳到主內容

建立一個新的 Flutter 應用

瞭解如何透過命令列、各種編輯器甚至雲端來引導建立一個新的 Flutter 應用程式。

本頁提供了在您首選的開發環境中引導建立新 Flutter 應用的分步說明。

要建立新的 Flutter 應用,請先安裝並配置 Flutter,然後選擇您首選的環境並按照相應的說明操作。

VS Code

#

要使用 VS Code 和其他基於 Code OSS 的編輯器建立 Flutter 應用,您首先需要安裝 Flutter 併為 Flutter 開發配置 VS Code。然後按照以下步驟操作:

  1. 啟動 VS Code

    開啟 VS Code 或您首選的基於 Code OSS 的編輯器。

  2. 開啟命令面板

    轉到檢視>命令面板或按Cmd/Ctrl + Shift + P

  3. 查詢 Flutter 命令

    在命令面板中,開始輸入 flutter:。VS Code 應會顯示來自 Flutter 外掛的命令。

  4. 執行新建專案命令

    選擇 Flutter: New Project 命令。您的作業系統或 VS Code 可能會請求訪問您的文件,請同意以繼續下一步。

  5. 選擇模板

    VS Code 應會提示您 Which Flutter template?(選擇 Flutter 模板)。根據您要建立的 Flutter 專案型別,選擇相應的模板。對於新的 Flutter 應用,請選擇 Application

  6. 選擇專案位置

    此時應出現一個檔案對話方塊。選擇或建立您希望存放專案的父目錄。請勿手動建立專案資料夾本身,Flutter 工具會自動建立它。點選 Select a folder to create the project in 以確認您的選擇。

  7. 輸入專案名稱

    VS Code 應會提示您輸入新專案的名稱。請根據 Effective Dart 指南,輸入符合 lowercase_with_underscores(小寫加下劃線)命名規範的應用名稱。按 Enter 確認。

  8. 等待專案初始化

    根據您輸入的資訊,VS Code 會使用 flutter create 來引導建立您的應用。進度通常會作為右下角的通知顯示,也可以從 Output(輸出)面板中檢視。

  9. 執行你的應用

    您的新應用現在應該已建立並在 VS Code 中開啟。要嘗試您的新應用,請按照 VS Code 執行和除錯中的步驟操作。

您已成功在 VS Code 中建立了新的 Flutter 應用!如果需要更多關於在 VS Code 中進行 Flutter 開發的幫助,請檢視 VS Code Flutter 開發參考

Android Studio

#

要使用 Android Studio 建立 Flutter 應用,您首先需要安裝 Flutter 併為 Flutter 開發配置 Android Studio。然後按照以下步驟操作:

  1. 啟動 Android Studio

    開啟安裝了 Dart 和 Flutter 外掛的 Android Studio。

  2. 開始建立專案

    如果您處於顯示 Welcome to Android Studio 的 IDE 歡迎對話方塊中,請找到並點選中間的 New Flutter Project 按鈕。

    如果您已經打開了一個專案,請將其關閉,或轉到 File > New > New Flutter Project...

  3. 選擇專案型別

    New Project 對話方塊中,選擇左側面板 Generators 下的 Flutter

  4. 驗證 Flutter SDK 設定

    在右側面板頂部,確保 Flutter SDK path 的值與您想要用於開發的 Flutter SDK 位置一致。如果不是,請透過選擇或指定正確的路徑來更新它。

  5. 配置您的專案

    點選 Next 繼續進行專案配置。此時應出現多個配置選項。

    Project name 欄位中,輸入一個符合 Effective Dart 指南中 lowercase_with_underscores 命名規範的應用名稱。

    如果您不是在建立應用程式,請從 Project type 下拉選單中選擇另一個模板。

    如果您正在建立一個將來可能會發布的應用,請將 Organization 欄位設定為您的公司域名

    其他欄位可以保持原樣,也可以根據專案的需要進行配置。

  6. 完成專案建立

    完成專案配置後,點選 Create 開始專案初始化。

  7. 等待工作空間初始化

    Android Studio 現在將初始化您的工作空間,引導建立專案檔案結構,並檢索應用的依賴項。這可能需要一些時間,可以在視窗底部跟蹤進度。

  8. 執行你的應用

    您的新應用現在應該已建立並在 Android Studio 中開啟。要嘗試您的新應用,請按照 Android Studio 執行和除錯中的步驟操作。

您已成功在 Android Studio 中建立了新的 Flutter 應用!如果需要更多關於在 Android Studio 中進行 Flutter 開發的幫助,請檢視 Android Studio Flutter 開發參考

IntelliJ

#

要使用 IntelliJ 或其他 JetBrains IDE 建立 Flutter 應用,您首先需要安裝 Flutter 併為 Flutter 開發配置 IntelliJ。然後按照以下步驟操作:

  1. 啟動 IntelliJ

    開啟安裝了 Dart 和 Flutter 外掛的 IntelliJ IDEA 或您首選的 JetBrains IDE。

  2. 開始建立專案

    如果您處於顯示 Welcome to IntelliJ IDEA 的 IDE 歡迎對話方塊中,請找到並點選右上角的 New Project 按鈕。

    如果您已經打開了一個專案,請將其關閉,或轉到 File > New > New Project...

  3. 選擇專案型別

    New Project 對話方塊中,選擇左側面板 Generators 下的 Flutter

  4. 驗證 Flutter SDK 設定

    在右側面板頂部,確保 Flutter SDK path 的值與您想要用於開發的 Flutter SDK 位置一致。如果不是,請透過選擇或指定正確的路徑來更新它。

  5. 配置您的專案

    點選 Next 繼續進行專案配置。此時應出現多個配置選項。

    Project name 欄位中,輸入一個符合 Effective Dart 指南中 lowercase_with_underscores 命名規範的應用名稱。

    如果您不是在建立應用程式,請從 Project type 下拉選單中選擇另一個模板。

    如果您正在建立一個將來可能會發布的應用,請將 Organization 欄位[設定為您的公司域名][ij-set-org]。

    其他欄位可以保持原樣,也可以根據專案的需要進行配置。

  6. 完成專案建立

    完成專案配置後,點選 Create 開始專案初始化。

  7. 等待工作空間初始化

    IntelliJ 現在將初始化您的工作空間,引導建立專案檔案結構,並檢索應用的依賴項。這可能需要一些時間,可以在視窗底部跟蹤進度。

  8. 執行你的應用

    您的新應用現在應該已建立並在 IntelliJ 中開啟。要嘗試您的新應用,請按照 IntelliJ 執行和除錯中的步驟操作。

您已成功在 IntelliJ 中建立了新的 Flutter 應用!如果需要更多關於在 IntelliJ 中進行 Flutter 開發的幫助,請檢視 IntelliJ Flutter 開發參考

反重力

#

要使用 Antigravity 建立 Flutter 應用,您首先需要按照 Antigravity 工具頁面上的說明安裝並配置 Antigravity。然後按照以下步驟操作:

  1. 開啟 Antigravity 並建立工作空間

    啟動 Antigravity IDE,並使用 Agent Manager 為您的專案建立一個新的沙盒工作空間。

  2. 使用 Agent Manager

    切換到 Agent Manager 介面,您可以透過聊天與 AI 智慧體進行互動。

  3. 編寫詳細的提示詞

    向智慧體詳細地描述您的應用需求,就像給初級開發人員下達指令一樣。例如:“建立一個名為 my_app 的新 Flutter 專案。新增一個帶有列表項和浮動操作按鈕的主螢幕”。

  4. 檢視並批准計劃

    AI 智慧體將生成一份詳細的實施計劃,包括資料夾結構、依賴項和步驟。您可以檢視此計劃並點選 Proceed(繼續),或者提供反饋以進行修改。

  5. 授權操作

    智慧體在執行終端命令(如 flutter pub addflutter create)或訪問瀏覽器/模擬器之前會徵求您的許可。檢視並 Accept(接受)這些操作,以允許智慧體構建應用。

  6. 迭代與完善

    初始應用生成後,您可以提供進一步的提示詞來新增功能、最佳化 UI、實現邏輯或新增持久化儲存(例如,“使用 shared_preferences 新增本地儲存”)。

  7. 測試應用

    使用整合的模擬器或連線物理裝置來測試應用。智慧體甚至可以執行測試並提供功能的影片演練。

  8. 在編輯器中驗證程式碼

    您可以隨時切換到標準程式碼編輯器檢視,以檢查生成的 Dart 和 Flutter 檔案,確保程式碼質量符合您的標準。

終端

#

要透過終端建立 Flutter 應用,您首先需要安裝並配置 Flutter。然後按照以下步驟操作:

  1. 開啟終端

    開啟您首選的命令列工具,例如 macOS 上的 Terminal 或 Windows 上的 PowerShell。

  2. 導航到目標目錄

    確保當前工作目錄是您想要放置新應用的父目錄。請勿手動建立專案資料夾,flutter 工具會自動完成。

  3. 配置專案建立

    在終端中,輸入 flutter create 命令,並傳入您想要的標誌和選項來配置專案。例如,要建立一個帶有精簡 main.dart 檔案的應用,可以新增 --empty 選項。

    flutter create --empty
    

    要了解可用的建立選項,請在另一個終端視窗中執行 flutter create --help

  4. 輸入專案名稱

    作為 flutter create 的唯一非選項引數,指定應用程式的目錄和預設名稱。名稱應根據 Effective Dart 指南遵循 lowercase_with_underscores 命名規範。

    例如,如果您想建立一個名為 my_app 的應用

    flutter create my_app
    
  5. 執行配置好的命令

    要根據指定的配置建立專案,請執行您在上一步中構建的命令。

  6. 等待專案初始化

    flutter 工具現在將引導構建專案的檔案結構並檢索任何必要的依賴項。這可能需要一段時間。

  7. 進入專案目錄

    專案建立完成後,您可以在終端或首選編輯器中進入該目錄。例如,在 bash shell 中,對於名為 my_app 的專案

    cd my_app
    
  8. 執行你的應用

    要嘗試您的新應用,請在終端中執行 flutter run 命令,並根據提示選擇輸出裝置。

您已成功在終端中建立了新的 Flutter 應用!如果需要配置專案的幫助或關於 flutter 命令列工具的問題,請檢視 Flutter CLI 參考