Mehr
Wie man asynchrone Operationen in Flutter mit Future.wait und Back4app optimiert

7min
Einführung
Asynchrone Programmierung ist in der modernen App-Entwicklung unerlässlich, insbesondere bei Aufgaben wie dem Abrufen von Daten aus mehreren Quellen oder dem Durchführen mehrerer Netzwerkaufrufe. Das effiziente Handhaben mehrerer asynchroner Aufrufe kann jedoch herausfordernd sein. In Flutter bietet die Future.wait-Methode eine leistungsstarke Möglichkeit, mehrere Futures, sodass Ihre App mehrere asynchrone Operationen gleichzeitig und effizient abwarten kann.
In diesem Tutorial lernen Sie, wie Sie Future.wait in Flutter verwenden, um die Leistung Ihrer App beim Umgang mit mehreren asynchronen Aufgaben zu optimieren. Wir werden diese Technik mit Back4app integrieren, wo Sie gleichzeitige Datenabrufe von Ihrem Backend durchführen, die Ergebnisse speichern und die Wartezeit für Ihre Benutzer erheblich reduzieren können.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto unter Back4app.com an.
Einrichtung der Flutter-Entwicklungsumgebung auf Ihrem lokalen Rechner. Folgen Sie der Flutter-Installationsanleitung , wenn Sie dies noch nicht eingerichtet haben.
Grundkenntnisse der asynchronen Programmierung in Flutter und wie man Back4app als Backend-Service verwendet. Wenn Sie neu bei Back4app sind, schauen Sie sich die Einführung in Back4app an.
Schritt 1 – Einrichten Ihres Back4app Backends
﻿
Die Task-Klasse sollte die Felder haben: name (String) und completed (Boolean).
Die Project-Klasse sollte die Felder haben: title (String) und description (String).
Fügen Sie Beispieldaten hinzu: Füllen Sie diese Klassen mit Beispieldaten, die wir gleichzeitig mit Future.wait in unserer Flutter-App abrufen werden.
Holen Sie sich Ihre Back4app-Anmeldeinformationen: Navigieren Sie zu Ihren Projekteinstellungen, um Ihre Anwendungs-ID und Ihren Client-Schlüssel abzurufen, die Sie benötigen, um Ihre Flutter-App mit Back4app zu verbinden.
Schritt 2 – Einrichten Ihres Flutter-Projekts
Erstellen Sie ein neues Flutter-Projekt: Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie aus:
Fügen Sie Abhängigkeiten hinzu: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
Initialisieren Sie Parse in Ihrer App: Importieren Sie in lib/main.dart, das Parse SDK und initialisieren Sie es in der main-Funktion:
Text
Text
 const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
 const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
 const keyParseServerUrl = 'https://parseapi.back4app.com';

 await Parse().initialize(keyApplicationId, keyParseServerUrl,
     clientKey: keyClientKey, autoSendSessionId: true);

 runApp(MyApp());
 const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
 const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
 const keyParseServerUrl = 'https://parseapi.back4app.com';

 await Parse().initialize(keyApplicationId, keyParseServerUrl,
     clientKey: keyClientKey, autoSendSessionId: true);

 runApp(MyApp());
﻿
Ersetzen Sie 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Daten gleichzeitig mit Future.wait
Erstellen Sie das TaskProjectScreen-Widget: In lib/main.dart, fügen Sie ein neues Widget hinzu, das Daten sowohl aus der Task als auch aus der Project-Klasse gleichzeitig abruft:
Dart
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
﻿
Dieses Widget ruft Aufgaben und Projekte gleichzeitig mit Future.wait, wodurch die gesamte Wartezeit verkürzt wird, da beide Anfragen gleichzeitig bearbeitet werden.
Schritt 4 – Testen und Ausführen Ihrer App
Führen Sie Ihre App mit flutter run.
Sie sollten eine Liste von Aufgaben und Projekten auf dem Bildschirm sehen. Beide Datensätze werden gleichzeitig abgerufen, was den Datenabruf schneller und effizienter macht.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie Future.wait verwenden, um asynchrone Operationen in Ihrer Flutter-App zu optimieren. Durch das gleichzeitige Abrufen von Daten aus mehreren Quellen und die Integration mit Back4app haben Sie Ihre App reaktionsschneller gemacht und die Gesamtwartezeit für Ihre Benutzer reduziert.
Die Verwendung von Future.wait in Kombination mit einem robusten Backend wie Back4app ermöglicht es Ihnen, mehrere asynchrone Aufgaben effizient zu verwalten und die Leistung Ihrer Flutter-Anwendungen zu verbessern. Für weitere Informationen zur Verwendung von Back4app mit Flutter, schauen Sie sich die Back4app Flutter-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man Flutter Completers mit einem Backend auf Back4app verwendet
ALS NÄCHSTES
Entwicklung von Echtzeit-Javascript-Anwendungen