我使用 FlutterFlow 建立了一個完整的服務請求平台，讓屋主可以預訂水管、電力和園藝服務。我測試了 AI 生成功能、連接了 Firebase、使用了版本控制，並部署到測試模式。
本篇評測涵蓋了價格細目、AI 的實際功能、匯出程式碼的樣貌，以及這陡峭的學習曲線是否值得。
什麼是 FlutterFlow？
Flutterflow 是一個視覺化應用程式開發平台，可讓您無需從頭撰寫程式碼就能建立原生的 iOS、Android 及網頁應用程式。它由前 Google 工程師打造，底層架構採用 Google 的 Flutter 框架。
與其花數週時間學習 Dart 和 Flutter 的元件系統，FlutterFlow 提供了拖放式介面，您可以：
- 使用預建元件以視覺化方式設計畫面
- 連接到 Firebase、Supabase 或自訂 API
- 使用 AI 描述來自動生成頁面
- 隨時匯出乾淨可讀的 Flutter 程式碼
FlutterFlow 的獨特之處在於它的透明度。您所做的每一項視覺化更動都會即時生成 Dart 程式碼，您可以查看、下載，甚至在平台外修改。您永遠不會被鎖定在平台中。
適合誰？
FlutterFlow 最適合需要真正行動應用程式，而不僅僅是外觀華麗網站的人。以下是能從中獲益最多的族群：
- 打造 MVP 的新創創辦人 是最佳目標。如果您要推出服務市場、外送應用或預訂平台，並且希望在數週（而非數月）內上架應用商店，FlutterFlow 可滿足需求。
- 為客戶開發的代理商和自由工作者 可受益於專業功能。版本控制系統讓您建立測試分支，程式碼匯出意味您能交付乾淨的 Flutter 專案，而 AI 生成則加速初始設計階段。
- 想要加快開發速度的開發者 將欣賞 FlutterFlow 處理行動開發中冗長部分的能力，例如響應式佈局、導覽堆疊和狀態管理，同時仍允許您在需要時撰寫自訂的 Dart 程式碼。
- 具技術好奇心的小型企業主 如果願意學習，也能使用 FlutterFlow。這可不是 Wix；您需要了解資料結構、API 呼叫和響應式設計等概念。
FlutterFlow 優缺點
- AI 生成上下文相關且準確的頁面
- 真實的 Flutter 程式碼，可隨時匯出
- 具分支管理的專業版本控制
- 原生 Firebase 和 Supabase 整合
- 可在需要時加入自訂 Dart 程式碼
- 生成過程中即時切換主題
- 元件樹顯示精確階層結構
- 即時程式碼檢視，強化透明度
- 能妥善處理複雜資料結構
- 內建 API 呼叫測試介面
- 提供 GitHub 倉庫同步功能
- 具偵錯面板的測試模式
- 對初學者而言學習曲線較陡峭
- 後端需具備 Firebase/Supabase 知識
- 無「簡易模式」處理簡單任務
準備好看看 FlutterFlow 是否適合您的專案了嗎？從免費方案開始試用，並建立一個畫面。如果您能在一小時內完成一個可運作的登入頁面，就能判斷這個學習曲線是否值得。
FlutterFlow 功能
- 視覺化元件為基礎的行動應用程式建構器
- 透過文字描述的 AI 頁面生成
- Firebase 與 Supabase 後端整合
- 即時 Flutter 程式碼匯出
- 類 Git 版本控制與分支管理
- 自訂 Dart 函式與元件
- iOS、Android 與網頁部署
- 帶自訂標頭的 API 整合
我使用 FlutterFlow 的實際體驗
FlutterFlow 定位為「進階使用者」的無程式碼工具。我這次嘗試建立一款讓屋主預訂水管和電力等服務的應用程式。以下是從首頁點擊到看到程式碼的完整歷程。
1. 開始使用：註冊與初始印象
旅程始於 FlutterFlow.io 首頁。網站風格非常現代，深色背景搭配高解析度圖像，展示他們的介面。
大大的標語「Build Better. Launch Faster.」（更好地建構，更快地上線）映入眼簾。我立刻注意到頂部有導覽列，包含 Product、Resources、Pricing、Enterprise 和 AI 區塊。
頁面上有「Log In」按鈕，以及醒目的「Start for Free」按鈕。我毫不猶豫地點擊了「Start for Free」。
這將我導向註冊頁面 (app.flutterflow.io/create-account)。我看到有多種方式加入：
- 以 Google 登入
- 以 Apple 登入
- 以 GitHub 登入
- 以 Microsoft 登入
我決定走一般註冊程序：輸入名稱和電子郵件地址，再移到密碼欄位。確認無誤後，我點擊了「Create Account」。
畫面閃動後，紫色的 FlutterFlow 標誌旋轉了幾秒，然後跳出了一連串的入門問題。
他們顯然想了解誰在使用這個工具。FlutterFlow 想知道：
- 您的主要角色是？（我選了 Developer）
- 以下哪項最能描述您的工作場域？（我選了 Startup）
- 您有程式開發經驗嗎？（我選了「A Lot」）
- 您想為哪類對象打造應用程式？（我選了「My Company」）
- 您有興趣聘請他人替您打造應用程式嗎？（我堅定地回答「No」）
回答完畢後，出現了「Start Building」按鈕。點擊後，我進入了專案儀表板。儀表板簡潔但略顯空曠。
我點擊「Create New」，接著跳出一個輸入專案名稱的視窗。我將其命名為「Service Request Portal」，然後再次按下「Create New」。
我對註冊體驗的看法：
入門流程稍微有點冗長，但明顯能幫助他們依您的技能層級客製化介面。整體感受專業且高級，就像在註冊一款正經的軟體，而非簡易的網頁小玩意。我喜歡他們能一開始就辨識到我的「developer」背景。
2. 瀏覽儀表板並設置環境
完成入門後，我來到主儀表板。這是一個乾淨的深色主題區域，右上角有一個顯眼的「Create New」按鈕。我點擊它，「Create a New Project」視窗隨即跳出。
我在專案名稱欄位輸入「Service Request Portal」。
在下方，我看到許多「Starter Apps」和「Template Categories」，例如：
- 商業
- 電子商務
- AI 與聊天
- 儀表板/CRM
- 美食與外送
我本可以選擇一個範本，但我想看看空白畫布的樣貌。於是我點擊「Start Building」，又出現了一個帶旋轉標誌的載入畫面，接著我就進入了編輯器。
我對初始儀表板的看法：
介面資訊量大。如果您想要「五分鐘快速建站」，這肯定不適合。它的外觀和使用感都像一個專業的 IDE（整合開發環境）。
如果您曾使用過 Photoshop 或 Figma，會比較熟悉，但如果您習慣簡易的拖放式網站建構工具，可能會覺得有點令人卻步。
3. 我首次嘗試 AI 生成功能
如果不必要，我不想手動建立每個按鈕和列。我聽說 FlutterFlow 內建了一個名為「Copilot」的 AI 頁面生成器，於是決定試試看。
我在頂部工具列看到一個小星形圖示，標示「Generate with AI (BETA)」。我點擊它，出現一個小視窗，裡面有一個文字框，寫著「Describe the page you want to create…」。
我準備了一段具體的描述：
「一個客戶入口，讓屋主可請求家居服務（水管、電力、清潔、園藝），並追蹤服務請求的狀態。包含使用者驗證、具備服務類型、描述、日期和緊急程度欄位的服務請求表單，以及展示所有請求與其狀態（待處理、進行中、已完成）的儀表板。」
我也提供了詳細的「資料結構」供 AI 參考：
- Services Table（服務表格）：ID、Service Type、Description、Requested Date、Status、Urgency、Image
- Users Table（使用者表格）：ID、Name、Email、Phone、Address、Role（Customer/Admin）
我注意到底部有字數統計：「737 / 1000 characters」。我尚在限制範圍內，於是點擊紫色的「Generate Page」按鈕。
出現了「Page generation started」的狀態訊息。接著我靜待，並稍微拖動生成視窗，觀看它的「思考」動畫。大約花了 2 分鐘，我甚至以為它卡住了，但畫面突然被一個設計填滿了。
結果是一個名為「HomeService Pro」的頁面，看起來相當完善。我看到：
- 一個標題寫著「Welcome back, Sarah」，副標題為「Your home services dashboard」。
- 一個位於紫色框中的大型「New Request」按鈕。
- 一個「Quick Actions」圖示網格，包含 Plumbing、Electrical、Cleaning 和 Landscaping 的圖示。
- 底部有一個「Recent Requests」列表，顯示如「Kitchen Sink Leak」和「Deep House Cleaning」，並標註「Pending」與「Complete」的狀態標籤。
在 AI 視窗的左側，有一列垂直排列的顏色圓圈。我點擊它們查看不同主題下應用程式的外觀。
每點擊一次，整個應用程式的配色就會即時更新。還有一些主題樣式名稱，如「Professional & Refined」「Tech AI」和「Readex Pro」。
我對結果很滿意，於是點擊底部的紫色「Insert Page」按鈕。隨後跳出一個小視窗，要求輸入「New Page」名稱。我輸入「ServicePortal」，並切換了「Do you want to update entire project theme?」的選項，然後點擊「Create Page」。
我對 AI 生成功能的看法：
這是整個體驗中最令人印象深刻的部分。我原以為會得到通用佈局，但它實際上理解了我所要求的特定服務，甚至還搭配了相對應的圖示。
主題切換功能很實用，讓我能在幾秒內完成應用程式的品牌配色設定。感覺我在不到一分鐘內省下了三小時的佈局工作。
4. 處理錯誤並探索「底層」功能
頁面插入後，我回到主編輯器。我注意到右上角有一個紅色圓圈，上面顯示數字「1」。
我知道在此類工具中，紅色通常代表問題。我點擊它，就打開了一個名為「Project Issues」的側邊欄。
錯誤訊息為：Entry Page is not an existing page in the project。
這讓我有點困惑。列表上明明有「ServicePortal」頁面。我點擊錯誤訊息，但它並沒有告訴我如何修復，只好自己去找。
我終於意識到，由於我刪除了原本的空白「HomePage」，應用程式不知該在啟動時顯示哪個頁面。最後我在最左側找到「App Settings」齒輪圖示。
在「General」內，我找到「Initial Page」設定。我將入口頁面設定為「ServicePortal」，紅色錯誤提示就消失了。
在我四處探查時，我想看看實際的程式碼。
FlutterFlow 的主要賣點之一就是它不是一個「黑盒子」。我點擊右上工具列的 > 圖示，隨即跳出「View Code」視窗。視窗顯示「Generating code…」幾秒後，出現了完整的程式碼編輯器。
我看到一個名為 service_portal_widget.dart 的檔案，可以捲動瀏覽數百行真實的 Dart 程式碼。它看起來乾淨且專業，引入語句如 import ‘package:flutter/material.dart’;。
我可以在「Widget」檢視和「Model」檢視之間切換。能實時看到我（或 AI）所做的每一次拖放動作都被轉換成真實可用的程式碼，令人著迷。
我也探查了左側的其他圖示：
- Firestore：我看到可以為服務和使用者建立「Collections」的位置。
- Data Types：可在此處定義複雜資料結構。
- Custom Code：這就更深入了，包含 Custom Functions、Custom Widgets 和 Custom Actions 區域，甚至還有 main.dart 檔案。
我對錯誤提示和程式碼檢視的看法：
錯誤訊息對初學者來說有點模糊，但此工具能立即標示問題非常棒。「View Code」功能是其中亮點。
它讓你有種在打造「真實」產品的感覺，而不僅僅是臨時原型。它提供了大多數無程式碼工具所不具備的透明度。
5. 預覽並檢查應用程式
接下來我想實際執行應用程式，看看使用感受。我點擊了右上角的「Eye」圖示，也就是「Preview App」按鈕。
新的瀏覽器分頁開啟，出現「旋轉的 F」載入動畫。編譯約需一分鐘。完成後，我看到了置於手機框架內的完整功能預覽。
我進行了測試：
- 我捲動底部的「Recent Requests」。捲動順暢，感覺像原生體驗。
- 我將滑鼠懸停在「Plumbing」和「Electrical」圖示上，它們都有回應。
- 我點擊了「New Request」按鈕。
- 我注意到模擬資料中有「Outlet Installation」，並帶有「Priority: Medium」標籤和「Scheduled: Tomorrow」日期。
我在預覽視窗頂部看到一個工具列，可以更改預覽的「Size」。我切換了：
- Mobile：375 x 812（預設）
- Tablet：768 x 1024
- Desktop：1440 x 900
當我切換到 Desktop 時，發現 AI 生成的佈局並非完全響應式。圖示橫跨整個畫面，看起來有點尷尬。
很明顯，AI 雖然能提供良好起點，但若要在所有裝置上都有良好顯示，仍需回到編輯器設置「響應式」規則。
我對預覽與檢查的看法：
預覽模式相當可靠。它不只是顯示應用畫面圖，而是真正構建一個可運作的版本。編譯時間稍長，但成果比其他建構器能更準確地呈現最終產品。
此外，透過測試我發現，雖然 AI 生成的設計是很好的「前台」出發點，FlutterFlow 的真正威力在於「後台」設定。
這裡可讓您將應用程式與現實世界連結、管理資料歷程，並最終將應用程式推送到使用者的手機。
6. 連接核心：資料庫與整合
當我滿意「ServicePortal」頁面的外觀後，我想看看如何實際存儲這些服務請求的資料。於是我點擊左側邊欄的 Firestore 圖示。
展開的面板顯示我尚未建立任何「Collections」。FlutterFlow 與 Google 的 Firebase 完美整合。如果我想真正上線，必須：
- 點擊「Create Collection」來設置我的「Services」和「Users」表格。
- 在設定中連結 Firebase Project ID。
- 啟用資料庫的「Firestore」和「Authentication」，以讓使用者能真正登入。
但不僅限於 Google 產品。我切換到 API Calls 分頁（圖示為雲朵與插頭）。整合潛力就從這裡展現。
這裡有一個醒目的「Add API Call」按鈕。若我想整合 Stripe 付款或天氣 API 以檢查園藝狀況，就在此處操作。您可以定義 GET 或 POST 請求、設定標頭，並直接在建構器內測試。
我還查看了 Media Assets 資料夾。起初是空的，但這裡可以上傳水管和電力公司的標誌。介面上有一個「Upload Media」按鈕，也支援拖放圖片。
最後，我發現了用於補足建構器無法開箱即用功能的 Custom Code 區段。這是開發者的深入區域，分為：
- Custom Functions：用於數學運算或資料格式化的小型 Dart 程式碼片段。
- Custom Widgets：若您需要 FlutterFlow 沒有提供的特定滑桿或圖表。
- Custom Actions：按鈕點擊時觸發的邏輯動作。
我對整合功能的看法：
FlutterFlow 並不嘗試自行包辦所有功能；它更像是一個非常精密的其他服務「管理者」。
Firebase 整合是我在無程式碼工具中見過最緊密的，但 API 與 Custom Code 區段則確保您永不受限。它給人一種可隨您成長的工具感。
7. 安全防護：版本控制與快照
無程式碼工具通常讓我怕怕的是「哎呀」因素：不小心刪掉一個重要區塊卻無法回復。
我鬆了一口氣，發現了 Version Control 選單（圖示像分支路徑）。
我點擊後，出現了「Version Control」側邊欄，顯示我的「Main」分支。有三個分頁：
- Branches：可在此建立「development」分支，以在不影響「live」應用的情況下測試新功能。
- Branch History：列出所有已做的變更。
- Snapshots：這是我花最多時間的分頁。
我點擊「Snapshots」，它顯示了工作歷程，包括 27 分鐘前建立的名為「Argus」的快照。
除了快照外，還有一個「Commit」按鈕。
這感覺就像在使用 GitHub。您可以儲存應用程式的特定狀態，命名（例如「Post-AI Generation」），如果之後搞砸了，再回到那個時刻即可。
甚至還有一個按鈕，可以 Connect to a GitHub Repo。這表示我在這個視覺化建構器中的每次變更都能推送到真正的 GitHub 倉庫，讓開發團隊接手。
我對版本控制的看法：
對專業團隊來說，這是顛覆性的功能。大多數無程式碼工具只有基本的「Undo」按鈕，而 FlutterFlow 擁有專業級的版本系統。這讓您能大膽嘗試，因為知道隨時有「存檔點」可回復。
8. 上線體驗：發布應用程式
最終目標是將應用程式從編輯器推到屋主手中。我查看了介面右上角的發布控制區。
測試與執行面板：在右側邊欄，有一個醒目的區域，標示「Test, Run & Publish」，副標題為「Use test mode for faster iteration」。這裡就是部署流程的起點。
我看見兩個主要選項：
- Test 按鈕（紫色閃電圖示）— 用於快速測試迭代
- FlutterFlow Local Run — 下載 FlutterFlow 桌面應用，以在本地裝置上執行應用程式
下面有一則提示：「You must enable the web platform in settings in order to publish to the web。」
還有一個區域顯示「Below are the versions of your past builds or ‘run modes’. You can copy and share links。」
測試模式體驗：當我點擊 Test 按鈕，出現了載入畫面，顯示：
- 「Preparing cloud resources…」
- 「We are setting up a testing session for your app…」
- 「This should take 2-3 minutes.」
等待期間，FlutterFlow 會顯示有用提示。在這個案例中，是「FlutterFlow Tip #10: Master Layouts in FlutterFlow」，並附有「Watch Now」連結到教學影片。
應用程式在測試模式中順利載入，展示了我的 Service Request Portal，包括：
- 頂部的會話資訊：「Current Load – Expires in 11 minutes」
- 一個「End Session」按鈕（紅色）
- 一個「Instant Reload」按鈕（綠色）— 用於快速重新載入變更
- 「Known Issues」、「Troubleshooting Info」和「Debug Panel」分頁
- 100% 縮放比例下的應用程式實機預覽
我對測試工作流程的看法：
FlutterFlow 的測試模式設計為快速迭代。11 分鐘的到期時間營造緊迫感，讓您專注測試特定功能，而不會分心。
「Instant Reload」按鈕可讓您在不重建整個會話的情況下立即看到變更。Debug Panel 則提供即時的主控台輸出，對於捕捉錯誤至關重要。
我對 FlutterFlow 的整體評價
經過這次體驗後，我對 FlutterFlow 的看法很明確：這是給認真使用者的一款專業工具。
如果您只是想建立基本的登陸頁或團隊內部的簡易工具，這可能有些大材小用。您會花比實際建置更多時間在學習介面上。
但如果您是想打造真正新創 MVP 的創業者，或想將開發速度提升 10 倍的開發者，這是一個卓越的平台。
讓我印象深刻的地方：
- AI 真正有用：它不只是給我通用範本，而是遵循我具體的指示，構建了具有上下文相關性的頁面。
- 徹底透明：隨時都能查看程式碼，意味您永遠不會被鎖定。您可以隨時匯出程式碼並自行部署。
- 專業功能：版本控制、分支歷史與完整的 Firestore 整合讓這款工具絕不會在一個月內過時。
使用時需注意：
- 學習曲線陡峭：這裡沒有「簡易模式」。您需要理解資料結構、API 呼叫和響應式佈局等概念。
- 編譯較慢：預覽的「build」過程需要時間，並非您在某些網頁建構器中能獲得的即時回饋。
定價與方案
FlutterFlow 提供四大方案，並依地區提供價格優惠。所有方案均包含核心視覺建構器，但在協作功能、部署選項與 AI 生成次數限制上有顯著差異。
| 方案 | 價格（月付） | 專案數 | AI 請求次數 | 程式碼下載 | 團隊人數 | 適合對象 |
|---|---|---|---|---|---|---|
| Free | $0 | 2 | 5（終身） | ✗ | 1 | 測試平台 |
| Basic | $15.60 | 無限 | 50/月 | ✓ | 1 | 個人開發 |
| Growth | $32（首席席位） | 無限 | 200/月 | ✓ | 2 | 小型團隊 |
| Business | $60（首席席位） | 無限 | 500/月 | ✓ | 5 | 成長企業 |
付款細節
- 接受方式：信用卡、PayPal
- 年度折扣：以年繳方式可節省約 25%
- 退款政策：首次購買享 14 天內退款保證
- 隱藏成本：首個免費自訂域名之外的連結需額外付費（每個域名 $10/月）。Growth（$10/協作者）和 Business（每位協作者 $8）方案亦可額外購買單專案協作者。
FlutterFlow 的替代方案
如果您的目標是擁有內建後端邏輯的複雜網頁應用，一個強力替代方案是 Bubble。
Bubble 是以網頁應用程式運行在其專有執行環境中。可將 FlutterFlow 視為以行動為優先、剛好支援網頁的工具，而 Bubble 則是以網頁為優先、可以適用於行動瀏覽器的平台。
| 功能 | FlutterFlow | Bubble |
|---|---|---|
| 易用性 | 結構化、以元件為基礎的介面，開發者較為熟悉。後端（Firebase/Supabase）設定學習曲線較陡。 | 功能強大但複雜。視覺化工作流程和資料庫管理集中於同一處，需要時間掌握。 |
| 適用範圍 | 需要離線功能及相機、GPS、推播通知等裝置功能的原生行動應用（iOS/Android）。 | 網頁應用程式、SaaS 平台、市集、管理儀表板、需複雜邏輯的內部工具。 |
| 行動應用 | 透過 Flutter 編譯為真正原生應用。可直接部署到 App Store 與 Google Play，效能順暢並支援離線。 | 行動瀏覽器可執行的漸進式網頁應用（PWA），非真正原生。需第三方工具才能上架應用商店。 |
| 後端與資料 | 須使用外部後端（Firebase、Supabase、REST API）。設定較多，但靈活度和擴展性更高。 | 內建後端，包含資料庫、工作流程和使用者驗證。所有功能集中於同一生態，但靈活度較低。 |
| 設計靈活度 | 以元件為基礎，提供預建元件。介面乾淨、行動優化佈局。高級方案支援 Figma 匯入。 | 網頁佈局高度可自訂。針對行動瀏覽器的響應式設計較瑣碎。整體設計掌控度更高。 |
| 效能 | 接近原生的行動效能。應用程式編譯為高效 Flutter 程式碼，能順暢處理複雜動畫。 | 隨著大量工作流程擴展，網頁應用效能可能下降。複雜應用需進行優化。 |
| 價格 | 價格由 $15.60/月 起。Basic 方案包含程式碼匯出。Growth/Business 方案可按每位額外團隊成員付費。 | 行動方案由 $42/月 起。價格依工作量（伺服器容量）調整。不支援程式碼匯出。 |
| 代碼所有權 | 所有付費方案均可完整匯出 Flutter 程式碼。可在任何環境部署，並在平台外修改，不會被鎖定。 | 無程式碼匯出。應用程式留在 Bubble 基礎設施上。若離開 Bubble，須從頭重建。 |
關鍵哲學差異在於：FlutterFlow 假設您會攜帶自己的後端，並透過程式碼匯出提供透明度；Bubble 則將所有功能打包在一起，但讓您停留在其生態系統中。兩者都不是「更好」，而是針對截然不同的使用情境進行優化。
FlutterFlow 最終評價
FlutterFlow 是一款為重度使用者打造的專業工具。如果您需要在 App Store 或 Google Play 上架原生行動應用，這是從概念到量產的最快途徑之一。
AI 生成功能真的有效，Firebase 整合無縫銜接，且程式碼匯出意味您永不被鎖定。
但學習曲線確實存在。您須理解資料結構、API 呼叫與響應式佈局等概念。如果僅是在測試構想或需要簡易網頁應用，Bubble 或 Softr 等平台將能更快速滿足需求。
最佳使用場景：以行動優先打造 MVP 的技術性創辦人、希望將原型開發速度提升 10 倍的開發者，或至少有一人熟悉後端架構的小型團隊。
