Come utilizzare i Completers di Flutter con un backend di Back4App

introduzione i futures e streams sono la strada da seguire in qualsiasi tipo di operazione asincrona tuttavia, a volte entrambi non sono sufficienti se desideri un controllo più avanzato su futures , allora usa un completer è uno strumento attraverso il quale puoi completare un future in modo programmatico in un certo senso, questo fornisce un migliore controllo sulle operazioni asincrone questo tutorial ti aiuterà a lavorare con flutter completers in un'applicazione che interagisce con un backend su back4app alla fine di questo tutorial, avrai imparato come utilizzare i completers in un'applicazione flutter per gestire compiti asincroni e integrare questi compiti con un servizio backend fornito da back4app stiamo per creare un'app molto semplice che recupera dati da un back4app backend utilizzando un completer per controllare il flusso dell'applicazione prerequisiti per completare questo tutorial, avrai bisogno di un account back4app registrati per un account gratuito su back4app com https //www back4app com ambiente di sviluppo flutter configurato sul tuo computer locale segui la guida all'installazione di flutter https //flutter dev/docs/get started/install se non l'hai ancora configurato conoscenze di base di dart e programmazione asincrona in flutter se hai bisogno di un ripasso, dai un'occhiata alla guida alla programmazione asincrona di flutter https //dart dev/codelabs/async await passo 1 – configurazione del tuo backend back4app per prima cosa, configuriamo un semplice backend su back4app con cui la nostra applicazione flutter interagirà accedi al tuo account back4app e crea un nuovo progetto configura una nuova classe parse chiamata task , che memorizzerà i compiti che la nostra app flutter recupererà aggiungi le seguenti colonne alla classe task nome (string) il nome del compito stato (boolean) lo stato del compito (completato o meno) aggiungi alcuni compiti di esempio nel database back4app per testare ad esempio compito 1 nome = "completa il tutorial flutter", stato = true compito 2 nome = "inizia un nuovo progetto", stato = false il tuo backend back4app è ora pronto per essere accessibile dall'app flutter passo 2 – creazione di un progetto flutter successivamente, creeremo un nuovo progetto flutter apri il tuo terminale o prompt dei comandi esegui il seguente comando per creare un nuovo progetto flutter flutter create completer demo naviga nella directory del progetto cd completer demo 2\ apri il progetto nel tuo editor di codice preferito (ad es , vs code, android studio) passo 3 – aggiungere il parse sdk e configurare l'app ora, aggiungiamo le dipendenze necessarie per interagire con back4app apri pubspec yaml e aggiungi le seguenti dipendenze dependencies flutter sdk flutter parse server sdk flutter ^3 0 0 2\ esegui flutter pub get per installare le dipendenze 3\ in lib/main dart , importa il parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'dart\ async'; 4\ inizializza parse nella main funzione void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } sostituisci 'your app id' e 'your client key' con le tue credenziali effettive di back4app passo 4 – utilizzare i completers per recuperare dati in modo asincrono ora, utilizziamo un completer per recuperare dati dal backend di back4app e controllare quando i dati sono disponibili per l'uso nell'interfaccia utente in lib/main dart , crea una nuova classe che recupererà i compiti da back4app utilizzando un completer class taskmanager { final completer\<list\<parseobject>> completer = completer(); future\<list\<parseobject>> get tasks => completer future; taskmanager() { fetchtasks(); } void fetchtasks() async { querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('task')); final parseresponse response = await query query(); if (response success && response results != null) { completer complete(response results); } else { completer completeerror('failed to load tasks'); } } } questa classe inizializza un completer , inizia a recuperare i dati e completa il completer quando i dati sono disponibili 2\ nel widget myapp , usa il taskmanager per recuperare e visualizzare i compiti class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home scaffold( appbar appbar(title text('flutter completer demo')), body futurebuilder\<list\<parseobject>>( future taskmanager() tasks, builder (context, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return center(child circularprogressindicator()); } else if (snapshot haserror) { return center(child text('error ${snapshot error}')); } else if (!snapshot hasdata || snapshot data! isempty) { return center(child text('no tasks found ')); } else { return listview\ builder( itemcount snapshot data! length, itembuilder (context, index) { final task = snapshot data!\[index]; return listtile( title text(task get\<string>('name') ?? 'no name'), subtitle text('completed ${task get\<bool>('status') ? 'yes' 'no'}'), ); }, ); } }, ), ), ); } } 3\ esegui la tua app flutter dovresti vedere un elenco di compiti recuperati dal tuo backend back4app, con i loro nomi e stato di completamento conclusione in questo tutorial, hai imparato come utilizzare i completers di flutter per gestire operazioni asincrone e controllare il flusso di recupero dei dati nella tua applicazione integrandoti con back4app, hai creato un backend semplice ma potente per la tua app flutter, permettendoti di recuperare e visualizzare i dati in modo dinamico questo approccio può essere esteso per gestire scenari più complessi, come l'autenticazione degli utenti, la manipolazione dei dati e altro per ulteriori informazioni su come utilizzare flutter con back4app, dai un'occhiata alla documentazione di back4app flutter https //www back4app com/docs/flutter/overview buon coding!