Flutter Flow 学习文档 第一版
报错解决案例
1运行界面的乱码，出现乱七八糟贴图
应该是子组件的边距超出父组件范围之外的原因。
2点击输入框输入时，出现边界乱码。
需要把输入框的autofocus关掉，或者在页面中最外层的父组件垂直布局设置滚动。
3请把整个垂直布局设置为可滚动，因为点击输入框时，输入法面板会把所有的布局向上顶，压缩，因此会出现某些组件超出父组件而报错乱码的问题。
4遇到列表无法滚动的问题，尝试把列表设置为无限扩展，如果是滑动某处无法滚动，把该位置列容器的primary关掉，这样手指按下划动就能穿透最上方列表划动的检测。
5若是想在聊天页面设置气泡的自适应高度，请把固定高度删掉，设置一个固定宽度，在下方设置中把最小高度设置一下就可以了。
6容器设置无限高度崩溃，请先确认父组件是不是无限高度的，是就会报错。
API调用案例问题
1无法动态传token
使用API group的时候，group的参数是静态的，所以只能存放静态数据，变量应该放在组内每个API的请求里。
2请求失败
检查post请求的传递参数，确保参数正确，如果没有传参，请检查传参类型，大多数为json，请修改传递的json为{}
3在页面获取参数时，请不要在pageload调用api，请在Backend Query中call API，然后在页面参数动态设置中调用即可。
4页面跳转时，可使用页面传参，将List数据传到下一个页面，传递的数据请选择List的Item。
5 不知道是不是后端的问题，分页查询的启示page是1，但是Flutter flow给的默认参数是0，所以就会出现无限重复加载或者加载的数据是两倍的问题。在分页参数传入Api时，使用自定义代码将currentpage的值+1
Query cache 查询缓存
在调用API后，下面一个功能叫Enable Query Caching，打开它。
Scope 选择缓存保存的是全局还是页面。
Query name 创建一个缓存数据的名字
下方的key给缓存加一个主键，用于查询缓存时，区分是哪一条数据的缓存。
例如 我们使用的数据大多数都是根据userId查询，因此可以创建一个json数组，{idkey:1,}
另一个功能就是可以判断缓存什么时候可以覆盖，我们可以存入一个当前数据刷新的时间，time，因此保存的json数组为【{idkey:1,time:yyyy-mm-dd}】
在使用缓存的页面，在同样使用api调用的地方选择之前缓存设置的名字即可
Flutter flow
1 初次使用
1.1 页面设置
在项目的设置中根据设计图，设置好自己的启动页，以及APP桌面图标
1.2 颜色设置
在设置中的navBar&AppBar中设置自己项目的风格颜色，自定义颜色，方便之后调用。
2 页面布局
页面分为两个侧边栏，左边是页面以及页面组件的视图，右边是当前选中页面组件的属性。
从右往左介绍
2.1 Page paremeters
上一个页面跳转时，用于接收传入过来的参数。
2.2 scaffold 组件参数
组件参数，从左往右一次为组件属性，触发事件，数据库查询，动画，页面参数。
2.2.1 组件属性
Conditional Visibility 隐藏组件
当其自定义判断的值为true，就会显示该组件。
可以用Condition，自定义代码，if/then/else来做判断。
Padding 组件对外的边距
Alignment 决定组件上父组件中所在的位置
Contaner properties 容器属性
Box Shadow 边框阴影
Gradient 自定义渐变背景色，会覆盖background color
Child 设置子组件的位置
2.2.2 常用触发事件
Navigate 路由跳转，可设置跳转传参
Refresh database Request 用于刷新数据库请求
Update App/Page/Componet 更新APP全局/页面/组件参数
Setform Field 设置输入框，选择器的属性值
Alert dialog 默认提示框
Snack Bar 下部弹出提示框
Bottom sheet 弹出框（组件）
2.2.3 数据库查询
用于调用Api查询
2.2.4 动画
2.3 Developer Menu
此处可以下载当前APP的apk，可以查看生成的代码，下载代码压缩包
2.4 左侧功能
分别为页面列表以及页面组件的列表，可以拖动位置，装入文件夹。
左侧垂直列表则是添加组件，预览页面跳转流程图，firebasse数据库，App state全局参数，
Api，本地图片，自定义代码，自定义颜色，设置。
2.4.1 App State
创建数据的时候请打开下方这个按钮，可以持久储存数据。
还有一个就是Persisted这个参数，是决定应用退出后是否保存该数据的。
2.4.2 本地图片仓库
这里可以上传图片，也可以从组件中选择图片上传。
注意，上传的图片最好是png或者jpg，图片命名最好不要出现特殊符号，如果需要使用_即可。
3 组件
3.1 AppBar
此处不能直接点击AppBar添加容器或者小组件，需要自行从左边工具栏拖入。
3.1.1 高级用法
添加 SliverAppBar，效果如下图。
适用于首页轮播图Banner和标题栏以及Listview列表同时存在的页面，划动之后，隐藏选择标题栏上面的Banner，使Listview全屏，获得更好的体验。
添加 SliverAppBar：
确保添加 AppBar和带有一些项目的ListView。
从小部件树或画布区域中选择AppBar 。
移动到属性面板，找到App Bar Behavior部分并启用Collapsible (SliverAppBar) 。
向下滚动到Layout Properties并输入Expanded Height 。
在大多数情况下，您不需要输入折叠高度，因为它等于工具栏高度，默认情况下为 56 像素。但是，您可以根据需要更改此默认折叠高度（通过输入折叠高度值）。
背景小部件。这将在 SliverAppBar 展开时显示。
找到Title Properties部分并启用Use Flexible Space 。当您启用此属性并拥有背景小部件时，它将在 AppBar 内的小部件和上下滚动时的背景小部件之间精美地动画。
改变滚动行为
默认情况下，SliverAppBar 在您向下滚动时隐藏，并在向上滚动时到达列表中的第一项时开始出现。您可以使用App Bar Behavior部分下可用的属性更改此默认滚动行为。
滚动行为属性
控制滚动行为的属性：
Pinned：启用后，当您向下滚动时，SliverAppBar 将固定在顶部。
Floating：启用后，SliverAppBar 将在您向上滚动时开始出现。一旦 SliverAppBar 完全可见，展开的部分将开始出现。
Snap ：这仅在启用Floating属性后可用。启用后，即使您稍微向上滚动，带有扩展部分的 SliverAppBar 也将完全可见。
snap
最后使用该组件时，请打开最下方的按钮：
添加背景小部件
有时您可能希望显示图像、视频或任何自定义小部件作为 AppBar 的背景。为此：
从小部件树或画布区域中选择AppBar 。
移动到属性面板，找到Background Properties部分并启用Add Background Widget 。启用此项会将图像小部件添加为默认背景小部件。
要自定义或更改AppBar Background小部件内部的小部件（请参阅左侧的小部件树），请启用Edit in UI Builder 。
现在您可以自定义或添加您选择的小部件。执行此操作后，请确保禁用UI Builder 中的编辑以再次查看 AppBar 标题。
4 自定义代码
创建时设置好名字，返回值类型，以及需不需要传参。
注意，功能代码只能写在官方给的//注释内
此处有三个页面，代码页，openai页面，可以使用AI写代码，最后一个是测试，你要验证代码正不正确，最快的方式就是这里。
5 API调用
5.1 配置API
拿到Api后，配置好请求头和body
接下来是案例
为了方便，我把API做了一个分类，做成一个API组。
在group中设置请求头和api的地址，注意此处只能填写静态数据，不能使用变量！！
Group内部的API就可以使用变量了，如下图。
loginToken:[token]中[]可以添加变量，我们传入一个动态的token
此处我们使用一个关注用户的功能，设置好我们API的请求参数，这里是前端API调用传过来的。
拿到数据后，我们把它放入body，注意，此处body为json类型，我们token传入请求头，所以这里不填写。
点击右下角save保存，如果不保存，跳转其他页面后，本次修改所有内容消失！
我们现在要验证配置的API是否正确，下面来看案例：
这是API文档中给出的
我们的token：AAFCFB5EC6864F38AA2FA3C3D8DB068C
要关注的userId：1400
测试结果
暂时无法在飞书文档外展示此内容
5.2 调用API
在需要调用的页面中的组件或者其父组件的属性中使用数据库查询，之后就能在其子组件中使用API调用的值了。
注意，子组件调用的API无法在其父组件使用！
点击add，然后选择API call 选择自己要调用的API，传入参数，token一般我们存在全局参数里，
此处API已经调用完成，接下来就是把拿到的数据渲染出来
5.3 渲染从Api拿到的数据
如果我们拿的是一个列表，我们就需要使用列表组件去渲染，例如ListView和Column，我们使用json路径解析$.result来拿到我们的数据，我们把拿到的列表命名为FollowList然后去拿它的每一项数据。赋值给FollowList的 Item。
这样我们就能拿到值了
5.4 报错代码解释
success(code: '0000', comment: '请求成功'),
failed(code: '1111', comment: '请求失败'),------多半是传入参数格式的问题，不为空或者int/string不符合。
6 实战操作
6.1 页面跳转（传值）
可以设置参数，点击Define就是跳转到目标页设置跳转接收参数，Allow Back Navigation：是否可以回到当前页。
注意：在最新版的Flutter flow中，在跳转页面定义的接收传值的变量莫默认勾选Required，这个值代表所有能跳转到该页面的跳转动作必须传值，请把它关掉！
6.2 列表渲染
列表渲染一般用于Api调用渲染，或者渲染静态数据。使用的是数组，所以可以传入的也只能是数组，但是这个竟然不能直接使用自定义代码写一个静态数组。现在只有以下几种方式
自定义函数
state
Action Outtput
自定义函数比较麻烦，因此我们直接在page load中写一个动作，使用自定义代码存储到页面参数，再由列表组件渲染。
6.3 自定义弹窗（确认/取消or通知提示）
6.3.1 介绍
为了更好的展示UI，我们可以做一个自定义组件弹窗，使用Bottom Sheet来调用，要注意的是弹窗也是用自定义动作调用的，此处可以传值进组件，并拿到返回值，需要设置返回字段的名字，下面是案例。
6.3.2 案例
触发该弹窗时，我们传入参数，例如操作失败后，我把失败的返回数据传入
6.4 动画
分为两种
On page load
On Action Trigger
页面加载完成调用和点击触发（以Action形式触发，也就是要写进动作设置里面）
6.4.1 页面加载完成动画
动画加载之前一定要隐藏，不然动画会出现开始或者结尾的卡顿
Same delay是把这个这个事件的所有动画设置一样的delay和持续时间
我们正常的进出就用默认，如果是比较快的那种弹出来的动画就设置为Elastic即可。
暂时无法在飞书文档外展示此内容
暂时无法在飞书文档外展示此内容
6.4.2 点击触发动画
点击触发动画，我们也是需要先写好，然后再调用动作触发。
在逻辑的写法上需要注意，点击触发的动作不会自动回弹，我们需要手动设置delay后reset该动画。
由于动作是一个异步操作，请把动画放在最前方，然后勾选Non Blocking，是动画进入同步状态，动画播放的同时进行请求操作，以获得更好的用户体验。
下面是案例视频
暂时无法在飞书文档外展示此内容
6.5 自定义函数
6.5.1 国家查询、筛选（展示国家图标emoji）
用于把国家的countryId转换成emoji显示出国家图标，也可以用于显示国家昵称
6.5.2 自定义生日选择
day
month
year
6.5.3 表情
写入静态数据在自定义动作中，后调用。
点击表情之后关闭弹窗并把选择的表情传回上一个组件，然后把输入框原本的字符串和表情做个拼接，再设置个哦输入框的值，就可以实现表情选择了。
代码
在启动页就将emoji存入全局参数中，方便之后调用。
6.6 Listview无限滚动（多排显示）
在Flutter flow中，Listview虽然可以在同一个页面多次添加，但是使用无限滚动只能有一个。
在页面只能使用一个Listview的情况下，我们只能从数据上做一些处理，把无限滚动获取的数据分成两份，放在Listview的每一个子项中，经过多次测试，只有一个方法可以成功做到。
在List列表渲染时把我们从API拿到的数据，通过自定义函数，根据index的奇偶性把数据分成两份，再做成二维数组输出。
这时我们用的是一个list显示两列，所以我们调用时就使用list[0],list[1]来代替我们之前的list，分别设置好两个容器。
运行即可。
7 firebase数据库 创建
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数据库
注册成功后，进入创建App项目页面
（可选）【谷歌分析】您可以为项目启用Google Analytics 。如果您想启用 Google Analytics，系统将提示您在下一个屏幕上选择 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 数据库
配置 Firestore 数据库可帮助您直接从 FlutterFlow 创建集合并添加文档。
配置 Firestore 数据库：
从项目的 Firebase 仪表板中，导航到最左侧的菜单。在“构建”下，选择“Firestore 数据库” ，然后选择“创建数据库” （在屏幕截图中以黄色标记）。
接下来，您需要设置 Firebase 安全规则。要快速开始，您可以选择在测试模式下启动，然后选择下一步。
建议直接使用生产模式
接下来，您需要选择 Firestore 数据的存储位置。从下拉列表中选择一个位置，然后选择启用。请参阅此链接，了解有关 Firebase 位置的更多信息。
完成后，您将进入 Cloud Firestore 的面板视图，并可以立即开始创建集合和文档！
7.4 复制项目ID到FlutterFlow
从项目的 Firebase 仪表板中，导航到最左侧的菜单。选择项目设置（
) -->项目设置。如果上一步打开了新窗口，您可能需要切换选项卡才能看到此视图。
2.在您的项目下，查找项目 ID。 复制项目 ID。
3.返回 FlutterFlow，粘贴项目 ID，然后单击Connect 。
7.5 生成配置文件
你已经完成配置，接下来就可以使用Flutter中的firebase操作了。
