Flutter Flow 學習文檔 第一版
報錯解決案例
1運行界面的亂碼，出現(xiàn)亂七八糟貼圖
應該是子組件的邊距超出父組件范圍之外的原因。
2點擊輸入框輸入時，出現(xiàn)邊界亂碼。
需要把輸入框的autofocus關掉，或者在頁面中最外層的父組件垂直布局設置滾動。
3請把整個垂直布局設置為可滾動，因為點擊輸入框時，輸入法面板會把所有的布局向上頂，壓縮，因此會出現(xiàn)某些組件超出父組件而報錯亂碼的問題。
4遇到列表無法滾動的問題，嘗試把列表設置為無限擴展，如果是滑動某處無法滾動，把該位置列容器的primary關掉，這樣手指按下劃動就能穿透最上方列表劃動的檢測。
5若是想在聊天頁面設置氣泡的自適應高度，請把固定高度刪掉，設置一個固定寬度，在下方設置中把最小高度設置一下就可以了。
6容器設置無限高度崩潰，請先確認父組件是不是無限高度的，是就會報錯。
API調用案例問題
1無法動態(tài)傳token
使用API group的時候，group的參數(shù)是靜態(tài)的，所以只能存放靜態(tài)數(shù)據(jù)，變量應該放在組內每個API的請求里。
2請求失敗
檢查post請求的傳遞參數(shù)，確保參數(shù)正確，如果沒有傳參，請檢查傳參類型，大多數(shù)為json，請修改傳遞的json為{}
3在頁面獲取參數(shù)時，請不要在pageload調用api，請在Backend Query中call API，然后在頁面參數(shù)動態(tài)設置中調用即可。
4頁面跳轉時，可使用頁面?zhèn)鲄?，將List數(shù)據(jù)傳到下一個頁面，傳遞的數(shù)據(jù)請選擇List的Item。
5 不知道是不是后端的問題，分頁查詢的啟示page是1，但是Flutter flow給的默認參數(shù)是0，所以就會出現(xiàn)無限重復加載或者加載的數(shù)據(jù)是兩倍的問題。在分頁參數(shù)傳入Api時，使用自定義代碼將currentpage的值+1
Query cache 查詢緩存
在調用API后，下面一個功能叫Enable Query Caching，打開它。
Scope 選擇緩存保存的是全局還是頁面。
Query name 創(chuàng)建一個緩存數(shù)據(jù)的名字
下方的key給緩存加一個主鍵，用于查詢緩存時，區(qū)分是哪一條數(shù)據(jù)的緩存。
例如 我們使用的數(shù)據(jù)大多數(shù)都是根據(jù)userId查詢，因此可以創(chuàng)建一個json數(shù)組，{idkey:1,}
另一個功能就是可以判斷緩存什么時候可以覆蓋，我們可以存入一個當前數(shù)據(jù)刷新的時間，time，因此保存的json數(shù)組為【{idkey:1,time:yyyy-mm-dd}】
在使用緩存的頁面，在同樣使用api調用的地方選擇之前緩存設置的名字即可
Flutter flow
1 初次使用
1.1 頁面設置
在項目的設置中根據(jù)設計圖，設置好自己的啟動頁，以及APP桌面圖標
1.2 顏色設置
在設置中的navBar&AppBar中設置自己項目的風格顏色，自定義顏色，方便之后調用。
2 頁面布局
頁面分為兩個側邊欄，左邊是頁面以及頁面組件的視圖，右邊是當前選中頁面組件的屬性。
從右往左介紹
2.1 Page paremeters
上一個頁面跳轉時，用于接收傳入過來的參數(shù)。
2.2 scaffold 組件參數(shù)
組件參數(shù)，從左往右一次為組件屬性，觸發(fā)事件，數(shù)據(jù)庫查詢，動畫，頁面參數(shù)。
2.2.1 組件屬性
Conditional Visibility 隱藏組件
當其自定義判斷的值為true，就會顯示該組件。
可以用Condition，自定義代碼，if/then/else來做判斷。
Padding 組件對外的邊距
Alignment 決定組件上父組件中所在的位置
Contaner properties 容器屬性
Box Shadow 邊框陰影
Gradient 自定義漸變背景色，會覆蓋background color
Child 設置子組件的位置
2.2.2 常用觸發(fā)事件
Navigate 路由跳轉，可設置跳轉傳參
Refresh database Request 用于刷新數(shù)據(jù)庫請求
Update App/Page/Componet 更新APP全局/頁面/組件參數(shù)
Setform Field 設置輸入框，選擇器的屬性值
Alert dialog 默認提示框
Snack Bar 下部彈出提示框
Bottom sheet ?彈出框（組件）
2.2.3 數(shù)據(jù)庫查詢
用于調用Api查詢
2.2.4 動畫
2.3 Developer Menu
此處可以下載當前APP的apk，可以查看生成的代碼，下載代碼壓縮包
2.4 左側功能
分別為頁面列表以及頁面組件的列表，可以拖動位置，裝入文件夾。
左側垂直列表則是添加組件，預覽頁面跳轉流程圖，firebasse數(shù)據(jù)庫，App state全局參數(shù)，
Api，本地圖片，自定義代碼，自定義顏色，設置。
2.4.1 App State
創(chuàng)建數(shù)據(jù)的時候請打開下方這個按鈕，可以持久儲存數(shù)據(jù)。
還有一個就是Persisted這個參數(shù)，是決定應用退出后是否保存該數(shù)據(jù)的。
2.4.2 本地圖片倉庫
這里可以上傳圖片，也可以從組件中選擇圖片上傳。
注意，上傳的圖片最好是png或者jpg，圖片命名最好不要出現(xiàn)特殊符號，如果需要使用_即可。
3 組件
3.1 AppBar
此處不能直接點擊AppBar添加容器或者小組件，需要自行從左邊工具欄拖入。
3.1.1 高級用法
添加 SliverAppBar，效果如下圖。
適用于首頁輪播圖Banner和標題欄以及Listview列表同時存在的頁面，劃動之后，隱藏選擇標題欄上面的Banner，使Listview全屏，獲得更好的體驗。
添加 SliverAppBar：
確保添加 AppBar和帶有一些項目的ListView。
從小部件樹或畫布區(qū)域中選擇AppBar 。
移動到屬性面板，找到App Bar Behavior部分并啟用Collapsible (SliverAppBar) 。
向下滾動到Layout Properties并輸入Expanded Height 。
在大多數(shù)情況下，您不需要輸入折疊高度，因為它等于工具欄高度，默認情況下為 56 像素。但是，您可以根據(jù)需要更改此默認折疊高度（通過輸入折疊高度值）。
背景小部件。這將在 SliverAppBar 展開時顯示。
找到Title Properties部分并啟用Use Flexible Space 。當您啟用此屬性并擁有背景小部件時，它將在 AppBar 內的小部件和上下滾動時的背景小部件之間精美地動畫。
改變滾動行為
默認情況下，SliverAppBar 在您向下滾動時隱藏，并在向上滾動時到達列表中的第一項時開始出現(xiàn)。您可以使用App Bar Behavior部分下可用的屬性更改此默認滾動行為。
滾動行為屬性
控制滾動行為的屬性：
Pinned：啟用后，當您向下滾動時，SliverAppBar 將固定在頂部。
Floating：啟用后，SliverAppBar 將在您向上滾動時開始出現(xiàn)。一旦 SliverAppBar 完全可見，展開的部分將開始出現(xiàn)。
Snap ：這僅在啟用Floating屬性后可用。啟用后，即使您稍微向上滾動，帶有擴展部分的 SliverAppBar 也將完全可見。
snap
最后使用該組件時，請打開最下方的按鈕：
添加背景小部件
有時您可能希望顯示圖像、視頻或任何自定義小部件作為 AppBar 的背景。為此：
從小部件樹或畫布區(qū)域中選擇AppBar 。
移動到屬性面板，找到Background Properties部分并啟用Add Background Widget 。啟用此項會將圖像小部件添加為默認背景小部件。
要自定義或更改AppBar Background小部件內部的小部件（請參閱左側的小部件樹），請啟用Edit in UI Builder 。
現(xiàn)在您可以自定義或添加您選擇的小部件。執(zhí)行此操作后，請確保禁用UI Builder 中的編輯以再次查看 AppBar 標題。
4 自定義代碼
創(chuàng)建時設置好名字，返回值類型，以及需不需要傳參。
注意，功能代碼只能寫在官方給的//注釋內
此處有三個頁面，代碼頁，openai頁面，可以使用AI寫代碼，最后一個是測試，你要驗證代碼正不正確，最快的方式就是這里。
5 API調用
5.1 配置API
拿到Api后，配置好請求頭和body
接下來是案例
為了方便，我把API做了一個分類，做成一個API組。
在group中設置請求頭和api的地址，注意此處只能填寫靜態(tài)數(shù)據(jù)，不能使用變量??！
Group內部的API就可以使用變量了，如下圖。
loginToken:[token]中[]可以添加變量，我們傳入一個動態(tài)的token
此處我們使用一個關注用戶的功能，設置好我們API的請求參數(shù)，這里是前端API調用傳過來的。
拿到數(shù)據(jù)后，我們把它放入body，注意，此處body為json類型，我們token傳入請求頭，所以這里不填寫。
點擊右下角save保存，如果不保存，跳轉其他頁面后，本次修改所有內容消失！
我們現(xiàn)在要驗證配置的API是否正確，下面來看案例：
這是API文檔中給出的
我們的token：AAFCFB5EC6864F38AA2FA3C3D8DB068C
要關注的userId：1400
測試結果
暫時無法在飛書文檔外展示此內容
5.2 調用API
在需要調用的頁面中的組件或者其父組件的屬性中使用數(shù)據(jù)庫查詢，之后就能在其子組件中使用API調用的值了。
注意，子組件調用的API無法在其父組件使用！
點擊add，然后選擇API call 選擇自己要調用的API，傳入?yún)?shù)，token一般我們存在全局參數(shù)里，
此處API已經(jīng)調用完成，接下來就是把拿到的數(shù)據(jù)渲染出來
5.3 渲染從Api拿到的數(shù)據(jù)
如果我們拿的是一個列表，我們就需要使用列表組件去渲染，例如ListView和Column，我們使用json路徑解析$.result來拿到我們的數(shù)據(jù)，我們把拿到的列表命名為FollowList然后去拿它的每一項數(shù)據(jù)。賦值給FollowList的 Item。
這樣我們就能拿到值了
5.4 報錯代碼解釋
success(code: '0000', comment: '請求成功'),
failed(code: '1111', comment: '請求失敗'),------多半是傳入?yún)?shù)格式的問題，不為空或者int/string不符合。
6 實戰(zhàn)操作
6.1 頁面跳轉（傳值）
可以設置參數(shù)，點擊Define就是跳轉到目標頁設置跳轉接收參數(shù)，Allow Back Navigation：是否可以回到當前頁。
注意：在最新版的Flutter flow中，在跳轉頁面定義的接收傳值的變量莫默認勾選Required，這個值代表所有能跳轉到該頁面的跳轉動作必須傳值，請把它關掉！
6.2 列表渲染
列表渲染一般用于Api調用渲染，或者渲染靜態(tài)數(shù)據(jù)。使用的是數(shù)組，所以可以傳入的也只能是數(shù)組，但是這個竟然不能直接使用自定義代碼寫一個靜態(tài)數(shù)組。現(xiàn)在只有以下幾種方式
自定義函數(shù)
state
Action Outtput
自定義函數(shù)比較麻煩，因此我們直接在page load中寫一個動作，使用自定義代碼存儲到頁面參數(shù)，再由列表組件渲染。
6.3 自定義彈窗（確認/取消or通知提示）
6.3.1 介紹
為了更好的展示UI，我們可以做一個自定義組件彈窗，使用Bottom Sheet來調用，要注意的是彈窗也是用自定義動作調用的，此處可以傳值進組件，并拿到返回值，需要設置返回字段的名字，下面是案例。
6.3.2 案例
觸發(fā)該彈窗時，我們傳入?yún)?shù)，例如操作失敗后，我把失敗的返回數(shù)據(jù)傳入
6.4 動畫
分為兩種
On page load
On Action Trigger
頁面加載完成調用和點擊觸發(fā)（以Action形式觸發(fā)，也就是要寫進動作設置里面）
6.4.1 頁面加載完成動畫
動畫加載之前一定要隱藏，不然動畫會出現(xiàn)開始或者結尾的卡頓
Same delay是把這個這個事件的所有動畫設置一樣的delay和持續(xù)時間
我們正常的進出就用默認，如果是比較快的那種彈出來的動畫就設置為Elastic即可。
暫時無法在飛書文檔外展示此內容
暫時無法在飛書文檔外展示此內容
6.4.2 點擊觸發(fā)動畫
點擊觸發(fā)動畫，我們也是需要先寫好，然后再調用動作觸發(fā)。
在邏輯的寫法上需要注意，點擊觸發(fā)的動作不會自動回彈，我們需要手動設置delay后reset該動畫。
由于動作是一個異步操作，請把動畫放在最前方，然后勾選Non Blocking，是動畫進入同步狀態(tài)，動畫播放的同時進行請求操作，以獲得更好的用戶體驗。
下面是案例視頻
暫時無法在飛書文檔外展示此內容
6.5 自定義函數(shù)
6.5.1 國家查詢、篩選（展示國家圖標emoji）
用于把國家的countryId轉換成emoji顯示出國家圖標，也可以用于顯示國家昵稱
6.5.2 自定義生日選擇
day
month
year
6.5.3 表情
寫入靜態(tài)數(shù)據(jù)在自定義動作中，后調用。
點擊表情之后關閉彈窗并把選擇的表情傳回上一個組件，然后把輸入框原本的字符串和表情做個拼接，再設置個哦輸入框的值，就可以實現(xiàn)表情選擇了。
代碼
在啟動頁就將emoji存入全局參數(shù)中，方便之后調用。
6.6 Listview無限滾動（多排顯示）
在Flutter flow中，Listview雖然可以在同一個頁面多次添加，但是使用無限滾動只能有一個。
在頁面只能使用一個Listview的情況下，我們只能從數(shù)據(jù)上做一些處理，把無限滾動獲取的數(shù)據(jù)分成兩份，放在Listview的每一個子項中，經(jīng)過多次測試，只有一個方法可以成功做到。
在List列表渲染時把我們從API拿到的數(shù)據(jù)，通過自定義函數(shù)，根據(jù)index的奇偶性把數(shù)據(jù)分成兩份，再做成二維數(shù)組輸出。
這時我們用的是一個list顯示兩列，所以我們調用時就使用list[0],list[1]來代替我們之前的list，分別設置好兩個容器。
運行即可。
7 firebase數(shù)據(jù)庫 創(chuàng)建
1
Could not create an account as firebase@flutterflow.io to your Firebase project. Make sure "Email Sign-In" is turned on for your Firebase project, and try again.
解決方式：
Go to the Firebase console and select your project.
Navigate to the Authentication section on the left sidebar.
Under the Sign-in method tab, make sure that Email/Password is enabled.
If it is not enabled, click the pencil icon to edit the settings and enable it.
Save your changes and try creating the account again.
7.1 注冊firebase數(shù)據(jù)庫
注冊成功后，進入創(chuàng)建App項目頁面
（可選）【谷歌分析】您可以為項目啟用Google Analytics 。如果您想啟用 Google Analytics，系統(tǒng)將提示您在下一個屏幕上選擇 Google Analytics 帳戶。
暫時無法在飛書文檔外展示此內容
7.2 允許Flutter flow訪問您的項目
在項目的 Firebase 儀表板中，導航到最左側的菜單。選擇項目設置（
) -->用戶和權限。
2.從右上角選擇添加成員。
3.添加firebase@flutterflow.io作為項目的“Editor” ，然后選擇Done 。然后按添加成員。
4.在同一頁面（即用戶和權限）上，選擇高級權限設置（表格下方的藍色小文本）。這將在新的瀏覽器窗口中打開 Google Cloud 控制臺。
找到包含firebase@flutterflow.io的行并選擇編輯主體
選擇+ 添加另一個角色。
在“選擇角色”下，搜索“服務帳戶用戶” （您可能需要滾動才能找到它）。選擇服務帳戶用戶。
一共會添加三個如下圖所示
Cloud Functions admin和Service Account User
選擇保存。
7.3 配置您的 Firestore 數(shù)據(jù)庫
配置 Firestore 數(shù)據(jù)庫可幫助您直接從 FlutterFlow 創(chuàng)建集合并添加文檔。
配置 Firestore 數(shù)據(jù)庫：
從項目的 Firebase 儀表板中，導航到最左側的菜單。在“構建”下，選擇“Firestore 數(shù)據(jù)庫” ，然后選擇“創(chuàng)建數(shù)據(jù)庫” （在屏幕截圖中以黃色標記）。
接下來，您需要設置 Firebase 安全規(guī)則。要快速開始，您可以選擇在測試模式下啟動，然后選擇下一步。
建議直接使用生產模式
接下來，您需要選擇 Firestore 數(shù)據(jù)的存儲位置。從下拉列表中選擇一個位置，然后選擇啟用。請參閱此鏈接，了解有關 Firebase 位置的更多信息。
完成后，您將進入 Cloud Firestore 的面板視圖，并可以立即開始創(chuàng)建集合和文檔！
7.4 復制項目ID到FlutterFlow
從項目的 Firebase 儀表板中，導航到最左側的菜單。選擇項目設置（
) ? -->項目設置。如果上一步打開了新窗口，您可能需要切換選項卡才能看到此視圖。
2.在您的項目下，查找項目 ID。 ?復制項目 ID。
3.返回 FlutterFlow，粘貼項目 ID，然后單擊Connect 。
7.5 生成配置文件
你已經(jīng)完成配置，接下來就可以使用Flutter中的firebase操作了。
