Comment créer des widgets d'écran d'accueil dans Flutter avec HomeWidget et Back4App

introduction les widgets de l'écran d'accueil permettent aux utilisateurs d'accéder à des informations en temps réel de votre application directement sur l'écran d'accueil de leur appareil sans ouvrir l'application avec flutter, la création de ces widgets nécessite un certain code spécifique à la plateforme cependant, le home widget https //pub dev/packages/home widget package comble cette lacune en permettant l'échange de données entre votre application flutter et les widgets de l'écran d'accueil en utilisant du code dart dans ce tutoriel, vous apprendrez à créer un widget d'écran d'accueil dans flutter en utilisant le home widget package et à l'intégrer avec back4app—un backend en tant que service alimenté par parse server à la fin de ce tutoriel, vous aurez une application flutter qui affiche des données de back4app dans un widget d'écran d'accueil prérequis pour compléter ce tutoriel, vous aurez besoin de flutter sdk installé sur votre machine vous pouvez suivre le guide d'installation officiel de flutter https //flutter dev/docs/get started/install pour votre système d'exploitation connaissances de base en flutter et dart si vous êtes nouveau sur flutter, envisagez de consulter la documentation flutter https //flutter dev/docs pour vous familiariser avec les bases un ide ou éditeur de texte tel que visual studio code ou android studio un compte back4app inscrivez vous pour un compte gratuit sur back4app https //www back4app com/ parse server sdk pour flutter ajouté à votre projet vous pouvez apprendre à le configurer en suivant le guide sdk flutter de back4app https //www back4app com/docs/flutter/parse flutter sdk configuration spécifique à la plateforme pour les widgets d'écran d'accueil android et ios étape 1 – configuration du projet flutter 1 1 créer un nouveau projet flutter ouvrez votre terminal et exécutez flutter create home widget app naviguez vers le répertoire du projet cd home widget app 1 2 ajouter des dépendances ouvrez pubspec yaml et ajoutez les dépendances suivantes dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 exécutez flutter pub get pour installer les paquets étape 2 – configuration de back4app 2 1 créer une nouvelle application back4app connectez vous à votre tableau de bord back4app https //dashboard back4app com/ cliquez sur "créer une nouvelle application" entrez un nom pour votre application, par exemple, "homewidgetapp" , et cliquez sur "créer" 2 2 configurer le modèle de données dans le tableau de bord de votre application, accédez à la "base de données" section cliquez sur "créer une classe" dans la fenêtre modale sélectionnez "personnalisé" entrez "message" comme nom de la classe cliquez sur "créer la classe" 2 3 ajouter des colonnes à la classe dans la classe "message" , cliquez sur "+" pour ajouter une nouvelle colonne ajoutez les colonnes suivantes titre type chaîne contenu type chaîne ajoutez quelques données d'exemple à la "message" classe par exemple 2 4 obtenir les identifiants de l'application accédez à paramètres de l'application > sécurité et clés notez votre id d'application et votre clé client étape 3 – initialisation de parse dans votre application flutter ouvrez lib/main dart et modifiez le comme suit 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()); } remplacez 'your application id' et 'your client key' par vos véritables identifiants back4app étape 4 – récupération des données depuis back4app créer un nouveau fichier 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'), ), ], ), ), ); } } explication classe de message une classe modèle simple pour contenir les données du message fetchmessage() récupère les données de la message classe dans back4app et met à jour la variable message updatehomewidget() enregistre les données récupérées dans le widget de l'écran d'accueil en utilisant homewidget savewidgetdata et déclenche une mise à jour en utilisant homewidget updatewidget build() affiche les données du message et un bouton pour rafraîchir le message étape 5 – configuration du widget de l'écran d'accueil 5 1 configuration android 5 1 1 créer la mise en page du widget créez un nouveau fichier de mise en page xml dans android/app/src/main/res/layout/ nommé 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 créer le fournisseur de widget créez une nouvelle classe java dans android/app/src/main/java/your/package/name/ nommée 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 } } remplacez your package name par votre nom de package réel 5 1 3 mettre à jour le manifeste android ajoutez le fournisseur de widget à votre 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 créer le fichier d'informations du widget xml créez un nouveau fichier xml dans android/app/src/main/res/xml/ nommé 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 configuration ios 5 2 1 créer une extension de widget ouvrez votre projet flutter dans xcode en ouvrant ios/runner xcworkspace cliquez sur fichier > nouveau > cible choisissez extension de widget et cliquez sur suivant entrez homewidget comme nom du produit et assurez vous que inclure l'intention de configuration est décoché cliquez sur terminer et activez le schéma 5 2 2 mettre à jour le code du widget dans l'extension homewidget , ouvrez homewidget swift et modifiez le 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 ") } } remplacez your group id par l'identifiant de votre groupe d'applications (par exemple, group com example homewidgetapp ) 5 2 3 configurer les groupes d'applications dans xcode, sélectionnez votre projet et allez à signing & capabilities ajoutez "app groups" à la fois à votre cible d'application principale et à l'extension de widget créez un nouveau groupe d'applications (par exemple, group com example homewidgetapp ) assurez vous que les deux cibles ont le même groupe d'applications activé 5 3 mettre à jour le code flutter pour les configurations spécifiques à la plateforme dans votre updatehomewidget() méthode dans home page dart , mettez à jour les noms des widgets await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); étape 6 – exécution de l'application et test du widget 6 1 exécuter l'application dans votre terminal, exécutez flutter run 6 2 ajouter le widget à votre écran d'accueil android appuyez longuement sur l'écran d'accueil et sélectionnez "widgets" trouvez votre application dans la liste des widgets faites glisser et déposez le widget sur votre écran d'accueil ios entrez le mode jiggle en appuyant longuement sur l'écran d'accueil appuyez sur le "+" bouton dans le coin supérieur gauche recherchez votre widget par nom ajoutez le widget à votre écran d'accueil 6 3 mises à jour des données de test appuyez sur le "bouton de rafraîchissement" dans votre application pour récupérer de nouvelles données depuis back4app le widget sur votre écran d'accueil devrait se mettre à jour avec les nouvelles données conclusion dans ce tutoriel, vous avez appris à créer un widget d'écran d'accueil dans flutter en utilisant le home widget package et à l'intégrer avec back4app pour afficher des données dynamiques cela vous permet de fournir aux utilisateurs des informations à jour directement sur leurs écrans d'accueil, améliorant ainsi l'engagement et l'expérience utilisateur prochaines étapes données dynamiques implémentez des mises à jour de données en temps réel en utilisant les requêtes en direct de back4app interactivité ajoutez des actions de clic à votre widget pour ouvrir des pages spécifiques dans votre application personnalisation stylisez votre widget pour qu'il corresponde au thème et au design de votre application ressources supplémentaires documentation de back4app https //www back4app com/docs package home widget sur pub dev https //pub dev/packages/home widget guide du sdk parse pour flutter https //docs parseplatform org/flutter/guide/ documentation officielle de flutter https //flutter dev/docs bon codage !