使用 OverlayPortal 和 Back4app 集成构建 Flutter 应用程序

介绍 在本教程中，我们将学习如何在 flutter 中使用 overlayportal 来为工具提示或菜单等小部件创建动态覆盖。此外，我们还将集成 back4app 来存储和管理用户数据，例如在与覆盖交互时的偏好设置或采取的操作。 在本教程结束时，您将能够 在 flutter 应用中实现 overlayportal 。 显示交互式覆盖，例如浮动菜单或工具提示。 集成 back4app 作为后端来存储与覆盖相关的数据（例如，用户偏好或操作）。 先决条件 flutter 环境 确保您已安装 flutter。请遵循 安装指南 https //flutter dev/docs/get started/install 。 back4app 账户 在 back4app https //www back4app com/ 注册以用作您的后端。 基本的 flutter 小部件知识 熟悉常见的 flutter 小部件，如按钮、容器和覆盖。 步骤 1：设置 back4app 1 1 创建 back4app 项目 登录你的 back4app 账户 https //www back4app com/ 并创建一个名为 overlaydemoapp 的新项目。 创建一个 parse 类 ，名为 overlayactions ，并包含以下字段： 用户名 (字符串)：用户的名称。 动作类型 (字符串)：在覆盖层上采取的动作（例如，“打开”，“关闭”，“点击”）。 时间戳 (日期时间)：动作发生的时间。 1 2 获取你的 back4app 凭证 从 back4app 仪表板，导航到你的项目设置并获取你的 应用程序 id 和 客户端密钥 。这些凭证将用于在你的 flutter 应用中初始化 back4app。 步骤 2：设置 flutter 项目 2 1 创建一个新的 flutter 项目 打开终端并创建一个新的 flutter 项目 flutter create overlay portal app cd overlay portal app 2 2 添加依赖 打开 pubspec yaml 文件并添加 parse sdk 和 overlayportal 所需的依赖 dependencies flutter sdk flutter parse server sdk flutter ^latest version overlay portal ^0 1 0 provider ^5 0 0 运行 flutter pub get 来安装依赖 2 3 初始化 parse sdk 在 lib/main dart , 使用你的 back4app 凭据初始化 parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'overlay portal demo', theme themedata(primaryswatch colors blue), home overlayscreen(), ); } } 将 your back4app app id 和 your back4app client key 替换为你的 back4app 凭据 步骤 3：在 flutter 中实现 overlayportal 3 1 创建 overlayscreen 组件 在 lib/overlay screen dart , 创建我们将实现 overlayportal import 'package\ flutter/material dart'; import 'package\ overlay portal/overlay portal dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class overlayscreen extends statefulwidget { @override overlayscreenstate createstate() => overlayscreenstate(); } class overlayscreenstate extends state\<overlayscreen> { final overlayportalcontroller controller = overlayportalcontroller(); bool isoverlayvisible = false; future\<void> logaction(string actiontype) async { // log action to back4app final actionobject = parseobject('overlayactions') set('username', 'player1') // example user set('actiontype', actiontype) set('timestamp', datetime now()); await actionobject save(); } void toggleoverlay() { setstate(() { isoverlayvisible = ! isoverlayvisible; if ( isoverlayvisible) { logaction('opened'); } else { logaction('closed'); } }); controller toggle(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('overlay portal example'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ elevatedbutton( onpressed toggleoverlay, child text( isoverlayvisible ? 'hide overlay' 'show overlay'), ), overlayportal( controller controller, overlaychildbuilder (context) => positioned( top 150, left 50, child material( elevation 5 0, borderradius borderradius circular(8), child container( padding edgeinsets all(16 0), color colors blueaccent, child column( mainaxissize mainaxissize min, children \[ text( 'this is an overlay!', style textstyle(color colors white), ), sizedbox(height 10), elevatedbutton( onpressed () { logaction('clicked'); scaffoldmessenger of(context) showsnackbar(snackbar( content text('overlay button clicked!'), )); }, child text('click me'), ), ], ), ), ), ), ), ], ), ), ); } } 在这个实现中 覆盖门户 通过按钮按下进行切换。 用户的交互（打开、关闭或点击）被记录到 back4app 使用 logaction 方法。 覆盖层包含一条消息和一个触发操作的按钮。 3 2 创建用户界面 用户界面包含一个切换覆盖层可见性的按钮。覆盖层本身使用 positioned 小部件进行定位。当覆盖层可见时，屏幕上会出现一个带有消息和按钮的浮动框。 步骤 4：运行应用程序 打开终端并使用以下命令运行应用程序： 点击 显示覆盖层 按钮以切换覆盖层。当覆盖层可见时，点击覆盖层内的按钮。所有交互（打开、关闭和点击）将记录到 back4app。 步骤 5：在 back4app 上查看记录的操作 验证用户的操作是否被记录： 前往您的 back4app 控制面板。 导航到 overlayactions 类。 您应该看到记录的操作（打开、关闭、点击）及其时间戳。 步骤 6：自定义覆盖层 您可以通过以下方式进一步自定义覆盖层： 使用 positioned 小部件更改覆盖层的位置。 在覆盖层内添加更复杂的小部件，例如表单或菜单。 使用不同的颜色、边框和阴影来样式化覆盖层。 结论 在本教程中，您学习了如何在 flutter 应用中实现 overlayportal 以创建可切换的交互式覆盖层。此外，我们集成了 back4app 以记录用户与覆盖层的交互，提供一个强大的后端来存储数据并增强应用的功能。 此设置可用于构建功能丰富的应用程序，其中用户与覆盖层（例如工具提示、菜单、弹出窗口）的交互被存储在后端，提供用户行为的洞察或根据实时数据促进动态内容加载。 更多信息： flutter overlay portal 文档 https //pub dev/packages/overlay portal back4app 文档 https //www back4app com/docs