Plus
Comment utiliser les Completers Flutter avec un backend sur Back4app

11min
Introduction
Les Futures et Streams sont la voie à suivre dans tout type d'opération asynchrone. Cependant, parfois, les deux ne suffisent pas. Si vous souhaitez un contrôle plus avancé sur les Futures, alors utilisez un Completer. C'est un outil à travers lequel vous pouvez compléter un Future de manière programmatique. D'une certaine manière, cela offre un meilleur contrôle sur les opérations asynchrones. Ce tutoriel vous aidera à travailler avec les Flutter Completers dans une application qui interagit avec un backend sur Back4app.

À la fin de ce tutoriel, vous aurez appris à utiliser les Completers dans une application Flutter pour gérer des tâches asynchrones et intégrer ces tâches avec un service backend fourni par Back4app. Nous allons créer une application très simple qui récupère des données d'un backend Back4app en utilisant un Completer pour contrôler le flux de l'application.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Connaissances de base en Dart et en programmation asynchrone dans Flutter. Si vous avez besoin d'un rappel, consultez le Guide de programmation asynchrone Flutter.
Étape 1 – Configuration de votre backend Back4app
Tout d'abord, configurons un backend simple sur Back4app avec lequel notre application Flutter interagira.
Connectez-vous à votre compte Back4app et créez un nouveau projet.
Configurez une nouvelle classe Parse nommée Task, qui stockera les tâches que notre application Flutter récupérera. Ajoutez les colonnes suivantes à la Task classe:
nom (String) : Le nom de la tâche.
statut (Boolean) : Le statut de la tâche (terminée ou non).
Ajoutez quelques tâches d'exemple dans la base de données Back4app pour tester. Par exemple:
Tâche 1 : nom = "Terminer le tutoriel Flutter", statut = vrai
Tâche 2 : nom = "Commencer un nouveau projet", statut = faux
Votre backend Back4app est maintenant prêt à être accessible par l'application Flutter.
Étape 2 – Création d'un projet Flutter
Ensuite, nous allons créer un nouveau projet Flutter.
Ouvrez votre terminal ou invite de commande.
Exécutez la commande suivante pour créer un nouveau projet Flutter :
Bash
flutter create completer_demo
flutter create completer_demo
﻿
Naviguez vers le répertoire du projet :
Bash
cd completer_demo
cd completer_demo
﻿
    2. Ouvrez le projet dans votre éditeur de code préféré (par exemple, VS Code, Android Studio).
Étape 3 – Ajout du SDK Parse et configuration de l'application
Maintenant, ajoutons les dépendances nécessaires pour interagir avec Back4app.
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
﻿
     2. Exécutez flutter pub get pour installer les dépendances.
     3. Dans lib/main.dart, importez le SDK Parse :
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. Initialisez Parse dans la fonction :
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());
}
﻿
Remplacez 'YOUR_APP_ID' et 'YOUR_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 4 – Utilisation des Completers pour récupérer des données de manière asynchrone
Maintenant, utilisons un Completer pour récupérer des données depuis le backend Back4app et contrôler quand les données sont disponibles pour utilisation dans l'interface utilisateur.
Dans lib/main.dart, créez une nouvelle classe qui récupérera les tâches depuis Back4app en utilisant un Completer:
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');
    }
  }
}
﻿
Cette classe initialise un Completer, commence à récupérer des données et complète le Completer lorsque les données sont disponibles.
    2. Dans le MyApp widget, utilisez le TaskManager pour récupérer et afficher les tâches :
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. Exécutez votre application Flutter :
Vous devriez voir une liste de tâches récupérées depuis votre backend Back4app, avec leurs noms et leur statut de complétion.
Conclusion
Dans ce tutoriel, vous avez appris à utiliser Flutter Completers pour gérer les opérations asynchrones et contrôler le flux de récupération des données dans votre application. En intégrant avec Back4app, vous avez créé un backend simple mais puissant pour votre application Flutter, vous permettant de récupérer et d'afficher des données dynamiquement. Cette approche peut être étendue pour gérer des scénarios plus complexes, tels que l'authentification des utilisateurs, la manipulation des données, et plus encore.
Pour plus d'informations sur l'utilisation de Flutter avec Back4app, consultez la documentation Flutter de Back4app. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment intégrer l'IA générative dans votre application Flutter en utilisant Firebase Vertex AI
Comment optimiser les opérations asynchrones dans Flutter avec Future.wait et Back4app