FlutterFlow是Google收購的無程式碼(no-code)工具,能直接編譯出真正的Flutter應用程式,而不只是套版產物,如今已悄悄成為想做出iOS和Android App、卻不想請工程師的人的首選起點。這句話聽起來有點誇張,直到你真正動手做一次才會明白。所以這是一篇真正的實作教學:用FlutterFlow目前的免費方案,加上免費的Firebase「Spark」專案,做出一個具備電郵/密碼登入、並具備完整新增、讀取、刪除功能的筆記App。全程不需要任何付費方案——不過到最後你會碰到免費版的限制,我們會清楚指出在哪裡。
以下每一個選單名稱、開關名稱和動作類型,都已對照FlutterFlow目前的介面與官方文件核實過,因為無程式碼領域最常見的問題,就是教學文章所描述的介面早已是一年半前的舊版本。請預留大約45分鐘。
開始之前,你需要準備什麼
- 一個免費的FlutterFlow帳號(flutterflow.io)——免費方案可建立兩個專案,這已經足夠。
- 一個用來建立Firebase的Google帳號,Firebase是FlutterFlow預設的後端服務。
- 其他什麼都不需要。不需要Flutter SDK、不需要Android Studio,也不需要任何程式碼編輯器。
步驟一:建立專案並連接Firebase
建立新專案時選擇空白範本,而不是套用現成的起始範本——這樣能學到更多東西,也不必刪除一堆用不到的頁面。當FlutterFlow提示你連接後端服務時,選擇Firebase,並讓它自動幫你建立一個新的Firebase專案;這樣會自動啟用免費的Spark方案,足以應付這篇教學的全部內容(Spark方案對Firestore讀寫次數設有相當寬鬆的每日免費額度,並非以金額計費)。
步驟二:開啟身分驗證功能
前往 Settings and Integrations > App Settings > Authentication。打開 Enable Authentication 開關,並將 Authentication Type 設為 Firebase。在同一個面板裡,你還要設定兩個路由欄位——大多數新手教學都會跳過這一步,結果做出來的App完全不管登入狀態,就直接亂跳頁面:
- Entry Page ——顯示給尚未登入的使用者,請把它指向你的登入頁面。
- Logged In Page ——登入成功後自動顯示的頁面,請把它指向你的筆記清單頁面。
如果這兩項都沒設定,FlutterFlow就完全沒有任何導向邏輯——App只會打開頁面清單裡的第一個頁面,不管使用者有沒有登入。這正是新手「做完」的驗證流程,實際上完全沒發揮保護作用的最常見原因。
在Firebase控制台(會從你的專案自動連結過去)裡,到Authentication > Sign-in method啟用Email/Password登入方式。你不需要自己寫密碼驗證邏輯——密碼完全由Firebase處理;FlutterFlow的Sign In和Create Account動作只是去呼叫它而已。
步驟三:建立登入與註冊頁面
新增兩個頁面:LoginPage和SignupPage,各放入一個Email輸入框(TextField)、一個密碼輸入框(TextField)和一個按鈕。在註冊按鈕的動作流程裡,加入 Create Account 動作,並把兩個輸入框的值帶進去。在登入按鈕上,加入 Sign In 動作,使用同樣的兩個欄位。兩個動作成功後都會自動導向你的Logged In Page——不需要自己接導航邏輯,步驟二設定的Entry/Logged In Page會處理好一切。
步驟四:建立notes資料集合
切換到FlutterFlow裡的Firestore頁籤,點擊 + Create Collection。命名為 notes ,並加入兩個欄位: text (字串型別)和 userId (字串型別,存放登入使用者的UID,讓每個人只能看到自己的筆記)。這個欄位正是之後安全規則要檢查的對象——標準寫法是建立(create)時使用 request.resource.data.userId == request.auth.uid ,讀取/更新/刪除時使用 resource.data.userId == request.auth.uid ,因為 request.resource 代表正要寫入的內容,而單純的 resource 則代表資料庫裡已經存在的文件。
步驟五:用即時查詢建立清單畫面
在你的HomePage上拉入一個ListView,選取它,然後打開右側屬性面板裡的 Backend Query 面板。點擊 + Add Query,選擇 Query Collection,指向 notes,並加入篩選條件,讓 userId 等於目前使用者的UID。將ListView子項目裡的Text元件,綁定到查詢結果中的 text 欄位。這份清單現在是即時的:只要有資料寫進該使用者的Firestore資料,就會自動顯示在畫面上。
步驟六:新增筆記(Create Document)
新增一個浮動操作按鈕,以及一個用來輸入新筆記內容的TextField。在按鈕的動作流程裡,加入 Create Document 這個Firestore動作,指定目標為 notes 集合,並將 text 對應到輸入框的值,將 userId 對應到目前使用者。事後用Reset Form動作清空輸入框,避免內容殘留到下一筆筆記。
步驟七:刪除筆記
選取ListView裡的ListTile,並打開它的 Slidable 屬性,這是內建的滑動顯示行為,不需要自己寫手勢程式碼。接著加入一個 Delete Document 動作到滑出後顯示的按鈕上,並將它的文件參照(document reference)設為目前清單項目——FlutterFlow會在ListView裡自動把這個項目的參照帶出來。Delete Document需要的是這個確切的參照,而不是比對相符的欄位值;它是一個指標,不是一次搜尋。
步驟八:用懷疑的眼光測試一遍
在Test Mode裡執行App,用一個用完就丟的電郵地址註冊,新增兩三筆筆記,滑動刪除其中一筆,然後登出並重新開啟App。這時應該會回到LoginPage,而不是筆記清單——這就是Entry Page設定發揮作用的地方。重新登入,確認剩下的筆記完整保留。如果App在登出狀態下仍直接打開筆記清單,請回頭檢查步驟二的Authentication面板——十次裡有九次問題都出在這裡。
免費方案真正的限制在哪裡
以上所有步驟,在FlutterFlow完全免費的Free方案就能全部完成。免費方案的限制在於:最多只能建立兩個專案、終身只有五次AI生成請求額度,發佈功能也只限於網頁版、附兩個免費子網域——沒有程式碼匯出、沒有APK下載,也不能一鍵發佈到App商店。最便宜的升級方案Basic每月39美元,可解鎖無限專案數和程式碼下載功能;Growth方案(第一個席位80美元,之後每席55美元)和Business方案(第一個席位150美元,第二到第五席每席85美元)則加入團隊協作與商店發佈工具。對於第一個還在驗證想法的App來說,免費方案已經足夠讓你把整個流程做完並測試完整——只有當你真的想把App放上實體手機的主畫面、透過App商店發佈時,才需要開始付費。
真正讓這45分鐘值得投入的,不是這個筆記App本身——而是同樣這五個動作(Sign In、Create Account、Create Document、Query Collection、Delete Document),幾乎就是所有人在FlutterFlow裡打造任何CRUD App的骨幹,從習慣追蹤器到庫存管理工具都一樣。只要把Entry Page/Logged In Page這個容易踩雷的地方搞懂一次,之後每個專案就不會再因為同樣的問題,讓你花一整晚debug。
