Wie man Flutter Completers mit einem Backend auf Back4app verwendet

einführung futures und streams sind der weg, um in jeder art von asynchronen operationen voranzukommen manchmal sind jedoch beide nicht genug wenn sie mehr kontrolle über futures , dann verwenden sie einen completer es ist ein werkzeug, mit dem sie ein future programmgesteuert abschließen können auf diese weise bietet es eine bessere kontrolle über asynchrone operationen dieses tutorial hilft ihnen, flutter completers in einer anwendung zu verwenden, die mit einem backend auf back4app , interagiert am ende dieses tutorials werden sie gelernt haben, wie sie completers in einer flutter anwendung verwenden, um asynchrone aufgaben zu verwalten und diese aufgaben mit einem bereitgestellten backend dienst von back4app , zu integrieren wir werden eine sehr einfache app erstellen, die daten von einem back4app backend mit einem completer abruft, um den fluss der anwendung zu steuern voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto melden sie sich für ein kostenloses konto unter back4app com https //www back4app com einrichtung der flutter entwicklungsumgebung auf ihrem lokalen computer folgen sie der flutter installationsanleitung https //flutter dev/docs/get started/install , wenn sie sie noch nicht eingerichtet haben grundkenntnisse in dart und asynchroner programmierung in flutter wenn sie eine auffrischung benötigen, schauen sie sich die flutter async programming guide https //dart dev/codelabs/async await an schritt 1 – einrichten ihres back4app backends zuerst richten wir ein einfaches backend auf back4app ein, mit dem unsere flutter anwendung interagieren wird melden sie sich bei ihrem back4app konto an und erstellen sie ein neues projekt richten sie eine neue parse klasse ein mit dem namen task , die aufgaben speichert, die unsere flutter app abrufen wird fügen sie die folgenden spalten zur task klasse hinzu name (string) der name der aufgabe status (boolean) der status der aufgabe (abgeschlossen oder nicht) fügen sie einige beispielaufgaben hinzu in der back4app datenbank hinzu, um zu testen zum beispiel aufgabe 1 name = "flutter tutorial abschließen", status = true aufgabe 2 name = "neues projekt starten", status = false ihr back4app backend ist jetzt bereit, von der flutter app zugegriffen zu werden schritt 2 – erstellen eines flutter projekts als nächstes erstellen wir ein neues flutter projekt öffnen sie ihr terminal oder die eingabeaufforderung führen sie den folgenden befehl aus, um ein neues flutter projekt zu erstellen flutter create completer demo navigieren sie zum projektverzeichnis cd completer demo 2\ öffnen sie das projekt in ihrem bevorzugten code editor (z b vs code, android studio) schritt 3 – hinzufügen des parse sdk und konfigurieren der app jetzt fügen wir die notwendigen abhängigkeiten hinzu, um mit back4app zu interagieren öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter parse server sdk flutter ^3 0 0 2\ führen sie flutter pub get aus, um die abhängigkeiten zu installieren 3\ in lib/main dart , importieren sie das parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'dart\ async'; 4\ initialisieren sie parse in der main funktion 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()); } ersetzen sie 'your app id' und 'your client key' durch ihre tatsächlichen back4app anmeldeinformationen schritt 4 – verwendung von completern zum asynchronen abrufen von daten jetzt verwenden wir einen completer um daten vom back4app backend abzurufen und zu steuern, wann die daten in der benutzeroberfläche verfügbar sind in lib/main dart , erstellen sie eine neue klasse, die aufgaben von back4app mit einem completer , abrufen wird 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'); } } } diese klasse initialisiert einen completer , beginnt mit dem abrufen von daten und schließt den completer ab, wenn die daten verfügbar sind 2\ verwenden sie im myapp widget den taskmanager , um aufgaben abzurufen und anzuzeigen 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\ führen sie ihre flutter app aus sie sollten eine liste von aufgaben sehen, die von ihrem back4app backend abgerufen wurden, mit ihren namen und dem abschlussstatus fazit in diesem tutorial haben sie gelernt, wie sie flutter completers verwenden, um asynchrone operationen zu verwalten und den datenabruf in ihrer anwendung zu steuern durch die integration mit back4app haben sie ein einfaches, aber leistungsstarkes backend für ihre flutter app erstellt, das es ihnen ermöglicht, daten dynamisch abzurufen und anzuzeigen dieser ansatz kann erweitert werden, um komplexere szenarien zu behandeln, wie z b benutzerauthentifizierung, datenmanipulation und mehr für weitere informationen zur verwendung von flutter mit back4app, schauen sie sich die back4app flutter dokumentation https //www back4app com/docs/flutter/overview viel spaß beim programmieren!