如何在Flutter中使用HomeWidget和Back4App创建主屏幕小部件

介绍 主屏幕小部件允许用户直接在设备的主屏幕上访问来自您应用的实时信息，而无需打开应用。使用 flutter，创建这些小部件需要一些特定于平台的代码。然而， home widget https //pub dev/packages/home widget 包通过使用 dart 代码实现 flutter 应用与主屏幕小部件之间的数据交换，弥补了这一差距。 在本教程中，您将学习如何使用 home widget 包在 flutter 中创建主屏幕小部件，并将其与 back4app 集成——一个由 parse server 提供支持的后端即服务。到本教程结束时，您将拥有一个在主屏幕小部件中显示来自 back4app 数据的 flutter 应用。 先决条件 要完成本教程，您需要： flutter sdk 安装在您的机器上。您可以按照 官方 flutter 安装指南 https //flutter dev/docs/get started/install 进行操作，适用于您的操作系统。 flutter 和 dart 的基本知识 。如果您是 flutter 新手，请考虑查看 flutter 文档 https //flutter dev/docs 以熟悉基础知识。 一个 ide 或文本编辑器 ，例如 visual studio code 或 android studio。 一个 back4app 账户 。在 back4app https //www back4app com/ 注册一个免费账户。 parse server sdk for flutter 添加到您的项目中。您可以通过查看 back4app flutter sdk 指南 https //www back4app com/docs/flutter/parse flutter sdk 来学习如何设置它。 特定平台的设置 适用于 android 和 ios 主屏幕小部件。 步骤 1 – 设置 flutter 项目 1 1 创建一个新的 flutter 项目 打开您的终端并运行： flutter create home widget app 导航到项目目录 cd home widget app 1 2 添加依赖 打开 pubspec yaml 并添加以下依赖 dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 运行 flutter pub get 来安装包 步骤 2 – 设置 back4app 2 1 创建一个新的 back4app 应用 登录到您的 back4app 控制面板 https //dashboard back4app com/ 点击 "创建新应用" 输入您的应用名称，例如 "homewidgetapp" , 然后点击 "创建" 2 2 设置数据模型 在您的应用程序仪表板中，导航到 "数据库" 部分。 点击 "创建一个类" 在弹出窗口中 选择 "自定义" 输入 "消息" 作为类名。 点击 "创建类" 2 3 向类添加列 在 "消息" 类中，点击 "+" 以添加新列。 添加以下列 标题 类型 字符串 内容 类型 字符串 向 "消息" 类添加一些示例数据。例如 2 4 获取应用程序凭据 导航到 应用设置 > 安全与密钥 记下您的 应用程序 id 和 客户端密钥 步骤 3 – 在您的 flutter 应用中初始化 parse 打开 lib/main dart 并按如下方式修改它 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; import 'home page dart'; // you'll create this file next void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } 用您的实际 back4app 凭据替换 'your application id' 和 'your client key' 步骤 4 – 从 back4app 获取数据 创建一个新文件 lib/home page dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class message { final string title; final string content; message(this title, this content); } class homepagestate extends state\<homepage> { message? message; @override void initstate() { super initstate(); fetchmessage(); } future\<void> fetchmessage() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('message')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { final data = apiresponse results! first; final title = data get\<string>('title') ?? ''; final content = data get\<string>('content') ?? ''; setstate(() { message = message(title, content); }); updatehomewidget(title, content); } else { print('error fetching data ${apiresponse error? message}'); } } future\<void> updatehomewidget(string title, string content) async { await homewidget savewidgetdata\<string>('title', title); await homewidget savewidgetdata\<string>('content', content); await homewidget updatewidget( name 'homewidgetprovider', // name of your homewidgetprovider iosname 'homewidget'); // used in ios } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('home widget app'), ), body center( child message == null ? circularprogressindicator() column( mainaxisalignment mainaxisalignment center, children \[ text( message! title, style textstyle(fontsize 24, fontweight fontweight bold), ), sizedbox(height 10), text( message! content, style textstyle(fontsize 18), ), sizedbox(height 20), elevatedbutton( onpressed fetchmessage, child text('refresh message'), ), ], ), ), ); } } 解释 消息类 一个简单的模型类，用于保存消息数据。 fetchmessage() 从 消息 类中获取数据，并更新 消息 变量。 updatehomewidget() 使用 homewidget savewidgetdata 将获取的数据保存到主屏幕小部件，并使用 homewidget updatewidget 触发更新。 build() 显示消息数据和一个刷新消息的按钮。 步骤 5 – 设置主屏幕小部件 5 1 安卓设置 5 1 1 创建小部件布局 在 android/app/src/main/res/layout/ 中创建一个新的 xml 布局文件，名为 home widget xml \<! android/app/src/main/res/layout/home widget xml > \<?xml version="1 0" encoding="utf 8"?> \<framelayout xmlns\ android="http //schemas android com/apk/res/android" android\ layout width="match parent" android\ layout height="match parent"> \<textview android\ id="@+id/widget title" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="title" android\ textsize="18sp" android\ layout gravity="center horizontal|top" android\ paddingtop="16dp"/> \<textview android\ id="@+id/widget content" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="content" android\ textsize="14sp" android\ layout gravity="center" android\ paddingtop="8dp"/> \</framelayout> 5 1 2 创建小部件提供者 在 android/app/src/main/java/your/package/name/ 中创建一个新的 java 类，名为 homewidgetprovider java // android/app/src/main/java/your/package/name/homewidgetprovider java package your package name; import android appwidget appwidgetmanager; import android appwidget appwidgetprovider; import android content context; public class homewidgetprovider extends appwidgetprovider { @override public void onupdate(context context, appwidgetmanager appwidgetmanager, int\[] appwidgetids) { // the homewidget package handles the update } } 将 your package name 替换为您的实际包名。 5 1 3 更新 android manifest 将小部件提供者添加到您的 androidmanifest xml \<! add inside the \<application> tag > \<receiver android\ name=" homewidgetprovider"> \<intent filter> \<action android\ name="android appwidget action appwidget update"/> \</intent filter> \<meta data android\ name="android appwidget provider" android\ resource="@xml/home widget info"/> \</receiver> 5 1 4 创建小部件信息 xml 在 android/app/src/main/res/xml/ 中创建一个新的 xml 文件，名为 home widget info xml \<! android/app/src/main/res/xml/home widget info xml > \<?xml version="1 0" encoding="utf 8"?> \<appwidget provider xmlns\ android="http //schemas android com/apk/res/android" android\ initiallayout="@layout/home widget" android\ minwidth="180dp" android\ minheight="110dp" android\ updateperiodmillis="0" android\ resizemode="horizontal|vertical" android\ widgetcategory="home screen"> \</appwidget provider> 5 2 ios 设置 5 2 1 创建一个小部件扩展 通过打开 ios/runner xcworkspace 打开您的 flutter 项目 点击 文件 > 新建 > 目标 选择 小部件扩展 并点击 下一步 输入 homewidget 作为产品名称，并确保 包含配置意图 未选中 点击 完成 并 激活 该方案 5 2 2 更新小部件代码 在 homewidget 扩展中，打开 homewidget swift 并进行修改 import widgetkit import swiftui struct provider timelineprovider { func placeholder(in context context) > simpleentry { simpleentry(date date(), title "title", content "content") } func getsnapshot(in context context, completion @escaping (simpleentry) > ()) { let entry = simpleentry(date date(), title "title", content "content") completion(entry) } func gettimeline(in context context, completion @escaping (timeline\<entry>) > ()) { var entries \[simpleentry] = \[] let shareddefaults = userdefaults(suitename "your group id") let title = shareddefaults? string(forkey "title") ?? "title" let content = shareddefaults? string(forkey "content") ?? "content" let entrydate = date() let entry = simpleentry(date entrydate, title title, content content) entries append(entry) let timeline = timeline(entries entries, policy never) completion(timeline) } } struct simpleentry timelineentry { let date date let title string let content string } struct homewidgetentryview view { var entry provider entry var body some view { vstack { text(entry title) font( headline) text(entry content) font( body) } } } @main struct homewidget widget { let kind string = "homewidget" var body some widgetconfiguration { staticconfiguration(kind kind, provider provider()) { entry in homewidgetentryview(entry entry) } configurationdisplayname("home widget") description("this is a home screen widget ") } } 将 your group id 替换为您的应用组标识符（例如， group com example homewidgetapp ）。 5 2 3 设置应用组 在 xcode 中，选择您的项目并转到 signing & capabilities 。 将 "app groups" 添加到您的主应用目标和小部件扩展中。 创建一个新的应用组（例如， group com example homewidgetapp ）。 确保两个目标都启用了相同的应用组。 5 3 更新 flutter 代码以进行平台特定配置 在您的 updatehomewidget() 方法中，位于 home page dart , 更新小部件名称： await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); 步骤 6 – 运行应用程序并测试小部件 6 1 运行应用程序 在您的终端中，运行： flutter run 6 2 将小部件添加到主屏幕 android 长按主屏幕并选择 "小部件" 在小部件列表中找到您的应用程序。 将小部件拖放到主屏幕上。 ios 通过长按主屏幕进入 抖动模式 点击左上角的 "+" 按钮。 按名称搜索您的小部件。 将小部件添加到主屏幕。 6 3 测试数据更新 在您的应用中点击 "刷新消息" 按钮以从 back4app 获取新数据。 您的主屏幕上的小部件应更新为新数据。 结论 在本教程中，您学习了如何使用 home widget 包在 flutter 中创建主屏幕小部件，并将其与 back4app 集成以显示动态数据。这使您能够在用户的主屏幕上提供最新信息，从而增强参与度和用户体验。 后续步骤 动态数据 使用 back4app 的实时查询实现实时数据更新。 交互性 为您的小部件添加点击操作以打开应用中的特定页面。 自定义 使您的小部件样式与应用的主题和设计相匹配。 其他资源 back4app 文档 https //www back4app com/docs pub dev 上的 home widget 包 https //pub dev/packages/home widget flutter 的 parse sdk 指南 https //docs parseplatform org/flutter/guide/ flutter 官方文档 https //flutter dev/docs 快乐编码！