Come creare widget per la schermata principale in Flutter con HomeWidget e Back4App?

introduzione i widget della schermata principale consentono agli utenti di accedere a informazioni in tempo reale dalla tua app direttamente sulla schermata principale del loro dispositivo senza aprire l'app con flutter, la creazione di questi widget richiede un po' di codice specifico per la piattaforma tuttavia, il home widget https //pub dev/packages/home widget pacchetto colma questa lacuna abilitando lo scambio di dati tra la tua app flutter e i widget della schermata principale utilizzando codice dart in questo tutorial, imparerai a creare un widget della schermata principale in flutter utilizzando il home widget pacchetto e integrarlo con back4app—un backend as a service alimentato da parse server alla fine di questo tutorial, avrai un'app flutter che visualizza i dati da back4app in un widget della schermata principale prerequisiti per completare questo tutorial, avrai bisogno di flutter sdk installato sul tuo computer puoi seguire la guida ufficiale all'installazione di flutter https //flutter dev/docs/get started/install per il tuo sistema operativo conoscenze di base di flutter e dart se sei nuovo a flutter, considera di rivedere la documentazione di flutter https //flutter dev/docs per familiarizzare con le basi un ide o editor di testo come visual studio code o android studio un account back4app registrati per un account gratuito su back4app https //www back4app com/ parse server sdk per flutter aggiunto al tuo progetto puoi imparare come configurarlo seguendo la guida sdk flutter di back4app https //www back4app com/docs/flutter/parse flutter sdk configurazione specifica della piattaforma per i widget della schermata principale di android e ios passo 1 – configurazione del progetto flutter 1 1 crea un nuovo progetto flutter apri il tuo terminale e esegui flutter create home widget app naviga nella directory del progetto cd home widget app 1 2 aggiungi dipendenze apri pubspec yaml e aggiungi le seguenti dipendenze dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 esegui flutter pub get per installare i pacchetti passo 2 – configurazione di back4app 2 1 crea una nuova applicazione back4app accedi al tuo dashboard di back4app https //dashboard back4app com/ clicca su "crea nuova app" inserisci un nome per la tua applicazione, ad esempio, "homewidgetapp" , e clicca su "crea" 2 2 configura il modello di dati nel tuo cruscotto dell'applicazione, vai alla "database" sezione clicca su "crea una classe" nella finestra modale seleziona "personalizzato" inserisci "messaggio" come nome della classe clicca "crea classe" 2 3 aggiungi colonne alla classe nella classe "messaggio" clicca su "+" per aggiungere una nuova colonna aggiungi le seguenti colonne titolo tipo stringa contenuto tipo stringa aggiungi alcuni dati di esempio alla "messaggio" classe ad esempio 2 4 ottieni le credenziali dell'applicazione naviga su impostazioni app > sicurezza e chiavi annota il tuo id applicazione e chiave client passaggio 3 – inizializzazione di parse nella tua app flutter apri lib/main dart e modificalo come segue 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()); } sostituisci 'your application id' e 'your client key' con le tue credenziali effettive di back4app passaggio 4 – recupero dei dati da back4app crea un nuovo file 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'), ), ], ), ), ); } } spiegazione classe messaggio una semplice classe modello per contenere i dati del messaggio fetchmessage() recupera i dati dalla classe messaggio in back4app e aggiorna la variabile messaggio updatehomewidget() salva i dati recuperati nel widget della schermata principale utilizzando homewidget savewidgetdata e attiva un aggiornamento utilizzando homewidget updatewidget build() visualizza i dati del messaggio e un pulsante per aggiornare il messaggio passo 5 – configurazione del widget della schermata principale 5 1 configurazione android 5 1 1 crea il layout del widget crea un nuovo file di layout xml in android/app/src/main/res/layout/ chiamato 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 crea il provider del widget crea una nuova classe java in android/app/src/main/java/your/package/name/ chiamata 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 } } sostituisci your package name con il tuo nome pacchetto reale 5 1 3 aggiorna android manifest aggiungi il provider del widget al tuo 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 crea widget info xml crea un nuovo file xml in android/app/src/main/res/xml/ chiamato 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 configurazione ios 5 2 1 crea un'estensione widget apri il tuo progetto flutter in xcode aprendo ios/runner xcworkspace clicca file > nuovo > target scegli widget extension e clicca avanti inserisci homewidget come nome del prodotto e assicurati che includi configurazione intent non sia selezionato clicca fine e attiva lo schema 5 2 2 aggiorna il codice del widget nell'estensione homewidget apri homewidget swift e modificalo 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 ") } } sostituisci your group id con il tuo identificatore del gruppo app (ad es , group com example homewidgetapp ) 5 2 3 configura i gruppi app in xcode, seleziona il tuo progetto e vai a signing & capabilities aggiungi "app groups" sia al tuo target principale dell'app che all'estensione del widget crea un nuovo gruppo app (ad es , group com example homewidgetapp ) assicurati che entrambi i target abbiano lo stesso gruppo app abilitato 5 3 aggiorna il codice flutter per configurazioni specifiche della piattaforma nel tuo updatehomewidget() metodo in home page dart , aggiorna i nomi dei widget await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); passo 6 – eseguire l'app e testare il widget 6 1 esegui l'app nel tuo terminale, esegui flutter run 6 2 aggiungi il widget alla tua home screen android tieni premuto sulla home screen e seleziona "widgets" trova la tua app nell'elenco dei widget trascina e rilascia il widget sulla tua home screen ios entra in modalità jiggle tenendo premuto sulla home screen tocca il "+" pulsante nell'angolo in alto a sinistra cerca il tuo widget per nome aggiungi il widget alla tua home screen 6 3 aggiornamenti dei dati di test tocca il "pulsante di aggiornamento" nella tua app per recuperare nuovi dati da back4app il widget sulla tua schermata principale dovrebbe aggiornarsi con i nuovi dati conclusione in questo tutorial, hai imparato come creare un widget per la schermata principale in flutter utilizzando il home widget pacchetto e integrandolo con back4app per visualizzare dati dinamici questo ti consente di fornire agli utenti informazioni aggiornate direttamente sulle loro schermate principali, migliorando il coinvolgimento e l'esperienza dell'utente prossimi passi dati dinamici implementa aggiornamenti dei dati in tempo reale utilizzando le live queries di back4app interattività aggiungi azioni di clic al tuo widget per aprire pagine specifiche nella tua app personalizzazione stila il tuo widget per adattarlo al tema e al design della tua app risorse aggiuntive documentazione di back4app https //www back4app com/docs pacchetto home widget su pub dev https //pub dev/packages/home widget guida al parse sdk per flutter https //docs parseplatform org/flutter/guide/ documentazione ufficiale di flutter https //flutter dev/docs buon codice!