Mehr
Wie man Flutter Completers mit einem Backend auf Back4app verwendet

11min
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.
Einrichtung der Flutter-Entwicklungsumgebung auf Ihrem lokalen Computer. Folgen Sie der Flutter-Installationsanleitung, 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 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:
Bash
flutter create completer_demo
flutter create completer_demo
﻿
Navigieren Sie zum Projektverzeichnis:
Bash
cd completer_demo
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:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
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:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
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:
Dart
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());
}
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:
Dart
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');
    }
  }
}
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:
Dart
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'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
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. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man generative KI in Ihre Flutter-App mit Firebase Vertex AI integriert
ALS NÄCHSTES
Wie man asynchrone Operationen in Flutter mit Future.wait und Back4app optimiert