FlutterFlow AI官網入口、AI生成Flutter應用、頁面組件、代碼導出與價格教學

FlutterFlow AI是什麼？

FlutterFlow AI是FlutterFlow這個用於開發跨平台應用程式的視覺化平台中所包含的人工智慧功能。它能根據指示自動生成Flutter頁面及組件，將介面截圖或Figma設計轉換為可編輯的結構，同時也能將聊天、圖像、語音和影片等功能以AI Agent的形式整合到用戶自己的應用程式中。

FlutterFlow所產生的是Flutter專案，可應用於iOS、Android、Web以及桌面端平台。AI能夠加速界面與功能的建構，但使用者仍可在視覺化編輯器中調整Widget、狀態、動作、API、資料庫以及自訂程式碼，且在付費方案中還可以取得原始碼以繼續開發。

Prompt to Page提示生成頁面

使用者可以描述頁面的用途、結構、風格以及主要元素，AI便能根據這些資訊來生成完整的頁面。此方法適用於快速製作登入頁、首頁、商品詳情頁、設定頁、儀表板以及表單等常見的頁面。在頁面生成之後，還可以透過 Widget Tree 和屬性面板進行進一步的修改。

提示最好寫明目標平台、導航方式、數據狀態、空狀態和錯誤狀態。AI生成的是初始實現，複雜業務仍需配置動作、後端查詢和狀態管理。

Prompt to Component生成組件

Prompt to Component用於產生可重複使用的FlutterFlow組件，例如商品卡片、使用者資料區塊、統計面板以及自訂導航。這些組件可以應用於多個頁面，並能透過參數來接收文字、圖片、狀態及回呼功能。

應優先將重複結構製作成組件，而非在每個頁面中分別生成。組件的參數、響應式約束以及空值處理都需要人工檢查，以避免日後修改時無法同步。

Image to Component圖片轉組件

使用者可以上傳介面截圖、線框圖或佈局草圖，AI會分析這些視覺資料並產生類似的FlutterFlow元件。這種方式適合將參考圖快速轉換成可編輯的Widget結構，而非僅得到一張無法互動的圖片。

截圖無法呈現真實的數據、互動功能、可訪問性以及不同的螢幕尺寸。在生成後，必須重新設計導航、點擊動作、動態內容以及響應式佈局，同時也要避免直接複製受版權保護的設計。

Figma導入

FlutterFlow可以從Figma的主題和Frame中生成頁面或組件，顏色會對應到FlutterFlow的主題，相關素材也可以被導入。目前的Business方案包含更大量的Figma Frame導入額度，其他方案的導入範圍則需參考價格表來判斷。

設計檔案應先整理Auto Layout、圖層名稱、組件和字體。結構混亂的Figma頁面會導致產生大量絕對定位或難以維護的Widget。

FlutterFlow Designer

FlutterFlow Designer是一種用於界面探索與設計交接的獨立設計工具，能夠透過自然語言來生成或修改Frame，之後再將其轉換為適合使用在FlutterFlow專案中的格式，或是產生PNG圖片或可讀性的說明文。此外，它還能與Claude、Gemini、Codex以及部分IDE相連接。

設計師所製作的視覺稿與可執行的應用程式並非處於同一階段。在交接之後，仍需要進行資料配置、邏輯設定、導航功能調整以及測試等工作，因此不能將那個漂亮的界面就當作已經完成的產品。

可視化Flutter開發

平台提供Widget樹、屬性面板、主題、反應式斷點、動畫和動作流，使用者不必手寫大部分的Dart程式碼即可打造應用程式。AI生成的結果會出現在同一編輯環境中，因此可以繼續進行細微的修改。

可視化開發並不代表無需理解應用邏輯。大型專案仍需規劃狀態邊界、資料模型、組件重用、錯誤處理以及效能。

Firebase與Supabase

FlutterFlow可連接Firebase和Supabase，配置用戶認證、資料庫查詢、儲存以及後端功能。AI生成的頁面可以與真實數據相連結，並透過動作流來完成新增、修改、刪除和篩選等操作。

資料庫安全規則必須在伺服器端設定。僅在頁面隱藏管理按鈕無法防止越權訪問，生產專案必須分別測試匿名使用者、一般使用者及管理員的權限。

API與OpenAPI導入

使用者可以設定 REST API，將參數、請求標頭、回應欄位對應到 FlutterFlow 的變數與頁面。Growth 以上版本支援使用 Swagger 或 OpenAPI 進行導入，適合快速連接現有的後端系統。

金鑰不應直接嵌入用戶端。需要保密的呼叫應透過 Cloud Functions 或自有的伺服器代理來處理，並設定超時、重試以及錯誤提示機制。

AI Agent Builder

AI Agent Builder讓用戶能在FlutterFlow內建立可設定的AI服務，並從應用程式的動作中加以呼叫。目前支援OpenAI、Google、Anthropic和ElevenLabs等供應商，可打造聊天、圖像生成、文字轉語音、語音轉文字以及影片生成等功能。

Basic可創建1個AI Agent，Growth及更高方案可創建不限數量。模型供應商的API費用、速率限制和內容政策通常獨立於FlutterFlow訂閱。

GenUI動態生成界面

GenUI Chat是FlutterFlow對A2UI協議的實作。開發者可以指定AI可以渲染的組件類型，以及可以調用的動作指令，如此一來，代理就能以結構化的方式來生成可互動的原生介面，而非執行任意的程式碼。

可用的組件和工具必須使用允許清單。涉及支付、刪除、外部訊息或敏感資料的 Action Block應增加確認與伺服器端授權。

外部AI編碼代理

FlutterFlow可讓Claude Code、Gemini CLI或Codex等外部代理讀取專案上下文、產生修改、執行測試，並透過專案綁定工具將變更推回視覺化編輯器。桌面端還提供AI Agent入口，用於檢查及配置所需的CLI。

編碼代理可能同時修改多項資源。運行前應確認目標專案和分支，限制修改範圍，並在推送前審查差異和測試結果。

CLI與MCP

新的FlutterFlow AI工作流透過CLI和專案級MCP來支援應用程式的建立或編輯。CLI還能用於匯出專案原始碼、選擇分支，以及部署Firebase；

API令牌只對有效訂閱用戶開放。

令牌應儲存於環境變數或受保護的憑證檔案中，不得被寫入倉庫、提示或截圖中。當MCP具有項目寫入功能時，仍應保持人工審批及分支隔離的機制。

自訂代碼

FlutterFlow支援自訂函數、自訂動作、自訂元件、自訂類別以及第三方的Dart套件，這些功能可用來實現那些無法透過視覺化方式完成的動作。Growth及以上版本還提供VS Code擴充功能，方便用戶下載、編輯及上傳符合支援範圍的自訂代碼。

自訂代碼會增加升級及產生衝突的風險。應僅在穩定的範圍內進行擴充，記錄相關的依賴版本，並在 FlutterFlow 重新生成後執行完整的測試。

源碼與APK下載

Basic及以上等級可下載Flutter專案源碼與APK，於本地Flutter環境中運行或自行部署。透過代碼導出，團隊能夠整合原生插件、使用獨立的CI流程，並將應用程式發布到應用商店。

導出代碼並不意味著所有的雲端服務都會隨著原始代碼一起提供。Firebase、Supabase、第三方API、金鑰、商店憑證以及平台帳號都需要另行設定。

GitHub集成

Growth及以上版本支援將變更推送到GitHub。FlutterFlow會把生成的變更推送到名為flutterflow的分支上，官方建議不要直接在該分支上進行手動修改，因為下一次推送時可能會覆蓋這些變更。

自訂修改應放在獨立分支並按官方合併流程處理。

GitHub的整合並非能夠在任意方向上進行無衝突的即時雙向同步。團隊需要約定分支的建立、開發分支的使用以及合併策略，以避免設計器更新時覆蓋本地的程式碼。

分支與即時協作

Free和Basic只有主分支且主要面向單人；Growth支持2名編輯者及每項目2個額外開放分支；

Business最多支援5名編輯者及5個額外的開放分支，並可購買更多專案協作者。

多人協作時應按功能拆分分支，並避免同時修改相同的頁面或資料結構。合併後要重新運行生成、建構和整合測試。

自動化測試與Test Pilot

Growth可為每個專案配置1個自動化測試，Business最多3個。Test Pilot用於輔助創建和運行測試，覆蓋使用者操作和關鍵流程。

少量端到端測試無法替代單元測試、介面測試、權限測試和真實設備測試。登入、支付、離線、推送和深連結應重點驗證。

一鍵本地化

Growth及以上版本提供一鍵本地化功能，可為應用程式加入多語言內容。AI翻譯能加快初稿的完成速度，但語言長度、複數形式、日期、貨幣單位以及文化表達等方面仍需人工審核。

應用商店文案、隱私說明和法律條款不應只使用未經校對的機器翻譯。

Web發布與自訂域名

Free可以發布Web應用，Basic則可增加自訂域名發布的功能。至於行動應用，則可以下載APK、產生原始碼，並透過一鍵式商店來進行部署。

商店審核、開發者帳號、簽名證書、隱私清單以及內購政策仍由蘋果與Google決定，一鍵部署並不代表會自動通過審核。

價格與版本對比

套餐或版本	價格、額度與核心權益
Free免費版	免費版費用為0美元，可使用視覺化環境、模板、API及資料整合功能，還能進行網路發布，最多可建立2個專案。目前包含10個Lite credits，AI生成功能則可免費使用5次。免費版無法下載完整的原始碼或APK，也不支援GitHub推送及多人協作功能，適合用於學習和驗證小型原型。
基本價格	Basic方案每月費用為39美元，可享受無限數量的項目、源代碼下載、APK下載、自定義網域名稱、真機測試以及一鍵部署到應用商店的功能。此外，還包含每月100個Lite credits以及50次AI生成請求的額度，並可建立1個AI Agent。若選擇年付方案，約可節省25%的費用，但實際費用可能會因稅金和地區差異而有所變動。
Growth價格	Growth版每月的首席席位費用為80美元，第二席位則為55美元。這兩個版本都包含基本功能，此外還具有GitHub整合功能、2人同步協作功能、每個專案可額外擁有2個分支、一鍵本地化功能、OpenAPI導入功能以及VS Code擴充功能。每個席位每月還可獲得200個Lite credits，而AI生成功能的使用次數則為每月200次。需要進行本地開發或團隊協作的项目，通常會從Growth版開始評估。至於額外的協作者、模型API以及後端服務的費用，则需另行計算。
Business價格	Business月付方案中，首席位為150美元，第2至第5名編輯者則各需85美元。此方案最多可支援5名編輯者、5個額外的分支，每個專案最多可進行3次自動化測試，同時還支持Figma Frame Import功能、自訂排版預設以及CLI工具。每個席位每月可獲得400個Lite credits，而AI生成功能則為每月500次使用次數。Business方案適合較為複雜的團隊，但最終的費用仍需根據席位數來計算，不能將150美元視為五人的打包價格。

Free免費版

免費版為0美元，可使用視覺化環境、範本、API與資料整合功能，以及網路發布功能，最多可建立2個專案。目前包含10個Lite credit，而AI生成功能則可免費使用5次，且此權限終身有效。

免費版無法下載完整源碼或APK，也沒有GitHub推送和多人協作，適合學習與驗證小型原型。

基本價格

Basic方案每月費用為39美元，可享受無限個項目、源代碼下載、APK下載、自訂域名、真機測試以及一鍵部署到應用商店的服務。此外，還包含每月100個Lite credits以及50次AI生成請求的額度，並可建立1個AI Agent。

年付頁面標註整體約節省25%，實際結算可能受稅費和地區影響。

Growth價格

Growth月付的首席位費用為80美元，第二席位則為55美元。這些服務包含Basic功能，此外還提供GitHub整合、兩人同時協作的功能、每個專案可擁有2個額外的分支、一鍵本地化功能、OpenAPI導入功能，以及VS Code擴充功能。每個席位每月可獲得200個Lite credits，而AI生成功能的使用次數則為每月200次。

需要本地開發與團隊協作的项目通常從Growth起評估。額外協作者、模型API和後端服務費用另計。