Cómo crear widgets en la pantalla de inicio en Flutter con HomeWidget y Back4App

introducción los widgets de la pantalla de inicio permiten a los usuarios acceder a información en tiempo real de su aplicación directamente en la pantalla de inicio de su dispositivo sin abrir la aplicación con flutter, crear estos widgets requiere algo de código específico de la plataforma sin embargo, el home widget https //pub dev/packages/home widget paquete cierra esta brecha al permitir el intercambio de datos entre su aplicación flutter y los widgets de la pantalla de inicio utilizando código dart en este tutorial, aprenderás cómo crear un widget de pantalla de inicio en flutter utilizando el home widget paquete e integrarlo con back4app—un backend como servicio impulsado por parse server al final de este tutorial, tendrás una aplicación flutter que muestra datos de back4app en un widget de pantalla de inicio requisitos previos para completar este tutorial, necesitarás flutter sdk instalado en tu máquina puedes seguir la guía oficial de instalación de flutter https //flutter dev/docs/get started/install para tu sistema operativo conocimientos básicos de flutter y dart si eres nuevo en flutter, considera revisar la documentación de flutter https //flutter dev/docs para familiarizarte con los conceptos básicos un ide o editor de texto como visual studio code o android studio una cuenta de back4app regístrate para obtener una cuenta gratuita en back4app https //www back4app com/ parse server sdk para flutter agregado a tu proyecto puedes aprender a configurarlo siguiendo la guía del sdk de flutter de back4app https //www back4app com/docs/flutter/parse flutter sdk configuración específica de la plataforma para widgets de pantalla de inicio de android e ios paso 1 – configuración del proyecto flutter 1 1 crear un nuevo proyecto flutter abre tu terminal y ejecuta flutter create home widget app navega al directorio del proyecto cd home widget app 1 2 agregar dependencias abre pubspec yaml y agrega las siguientes dependencias dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 ejecuta flutter pub get para instalar los paquetes paso 2 – configuración de back4app 2 1 crear una nueva aplicación en back4app inicia sesión en tu panel de back4app https //dashboard back4app com/ haz clic en "crear nueva app" ingresa un nombre para tu aplicación, por ejemplo, "homewidgetapp" , y haz clic en "crear" 2 2 configurar el modelo de datos en el panel de control de tu aplicación, navega a la "base de datos" sección haz clic en "crear una clase" en el modal selecciona "personalizado" ingresa "mensaje" como el nombre de la clase haz clic en "crear clase" 2 3 agregar columnas a la clase en la "mensaje" clase, haz clic en "+" para agregar una nueva columna agrega las siguientes columnas título tipo cadena contenido tipo cadena agrega algunos datos de ejemplo a la "mensaje" clase por ejemplo 2 4 obtener credenciales de la aplicación navega a configuración de la aplicación > seguridad y claves anota tu id de aplicación y clave de cliente paso 3 – inicializando parse en tu aplicación flutter abre lib/main dart y modifícalo de la siguiente manera 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()); } reemplaza 'your application id' y 'your client key' con tus credenciales reales de back4app paso 4 – obteniendo datos de back4app crea un nuevo archivo 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'), ), ], ), ), ); } } explicación clase de mensaje una clase de modelo simple para contener los datos del mensaje fetchmessage() obtiene datos de la clase de mensaje en back4app y actualiza la variable de mensaje updatehomewidget() guarda los datos obtenidos en el widget de la pantalla de inicio usando homewidget savewidgetdata y desencadena una actualización usando homewidget updatewidget build() muestra los datos del mensaje y un botón para actualizar el mensaje paso 5 – configuración del widget de la pantalla de inicio 5 1 configuración de android 5 1 1 crear el diseño del widget crea un nuevo archivo de diseño xml en android/app/src/main/res/layout/ llamado 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 crear el proveedor del widget crea una nueva clase de java en android/app/src/main/java/your/package/name/ llamada 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 } } reemplaza your package name con el nombre de tu paquete real 5 1 3 actualizar android manifest agrega el proveedor del widget a tu 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 crear widget info xml crea un nuevo archivo xml en android/app/src/main/res/xml/ llamado 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 configuración de ios 5 2 1 crear una extensión de widget abre tu proyecto de flutter en xcode abriendo ios/runner xcworkspace haz clic en archivo > nuevo > objetivo elige extensión de widget y haz clic en siguiente ingresa homewidget como el nombre del producto y asegúrate de que incluir configuración de intento esté desmarcado haz clic en finalizar y activar el esquema 5 2 2 actualizar el código del widget en la homewidget extensión, abre homewidget swift y modifícalo 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 ") } } reemplace your group id con su identificador de grupo de aplicación (por ejemplo, group com example homewidgetapp ) 5 2 3 configurar grupos de aplicaciones en xcode, seleccione su proyecto y vaya a signing & capabilities agregue "app groups" tanto a su objetivo principal de la aplicación como a la extensión del widget cree un nuevo grupo de aplicaciones (por ejemplo, group com example homewidgetapp ) asegúrese de que ambos objetivos tengan habilitado el mismo grupo de aplicaciones 5 3 actualizar el código de flutter para configuraciones específicas de la plataforma en su updatehomewidget() método en home page dart , actualice los nombres de los widgets await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); paso 6 – ejecutando la app y probando el widget 6 1 ejecutar la app en tu terminal, ejecuta flutter run 6 2 agregar el widget a tu pantalla de inicio android mantén presionada la pantalla de inicio y selecciona "widgets" encuentra tu app en la lista de widgets arrastra y suelta el widget en tu pantalla de inicio ios ingresa modo de jiggle manteniendo presionada la pantalla de inicio toca el "+" botón en la esquina superior izquierda busca tu widget por nombre agrega el widget a tu pantalla de inicio 6 3 actualizaciones de datos de prueba toca el "botón de actualizar mensaje" en tu aplicación para obtener nuevos datos de back4app el widget en tu pantalla de inicio debería actualizarse con los nuevos datos conclusión en este tutorial, aprendiste cómo crear un widget de pantalla de inicio en flutter utilizando el home widget paquete e integrarlo con back4app para mostrar datos dinámicos esto te permite proporcionar a los usuarios información actualizada directamente en sus pantallas de inicio, mejorando el compromiso y la experiencia del usuario próximos pasos datos dinámicos implementa actualizaciones de datos en tiempo real utilizando las consultas en vivo de back4app interactividad agrega acciones de clic a tu widget para abrir páginas específicas en tu aplicación personalización estiliza tu widget para que coincida con el tema y diseño de tu aplicación recursos adicionales documentación de back4app https //www back4app com/docs paquete home widget en pub dev https //pub dev/packages/home widget guía de parse sdk para flutter https //docs parseplatform org/flutter/guide/ documentación oficial de flutter https //flutter dev/docs ¡feliz codificación!