Plus
Comment optimiser les opérations asynchrones dans Flutter avec Future.wait et Back4app

7min
Introduction
La programmation asynchrone est essentielle dans le développement d'applications modernes, en particulier lorsqu'il s'agit de tâches comme la récupération de données à partir de plusieurs sources ou l'exécution de plusieurs requêtes réseau. Cependant, gérer plusieurs appels asynchrones de manière efficace peut être un défi. Dans Flutter, la Future.wait méthode offre un moyen puissant de gérer plusieurs Futures, permettant à votre application d'attendre plusieurs opérations asynchrones simultanément et efficacement.
Dans ce tutoriel, vous apprendrez à utiliser Future.wait dans Flutter pour optimiser les performances de votre application lors de la gestion de plusieurs tâches asynchrones. Nous intégrerons cette technique avec Back4app, où vous pouvez effectuer des récupérations de données simultanées depuis votre backend, stocker les résultats et réduire considérablement le temps d'attente pour vos utilisateurs.
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 programmation asynchrone dans Flutter et comment utiliser Back4app comme service backend. Si vous êtes nouveau sur Back4app, consultez le guide de démarrage avec Back4app.
Étape 1 – Configuration de votre backend Back4app
Créer un projet Back4app: Connectez-vous à votre compte Back4app et créez un nouveau projet.
Créer des classes Parse: Dans votre projet Back4app, créez deux nouvelles classes Parse nommées Task et Project.
La classe Task doit avoir des champs : name (String) et completed (Boolean).
La classe Project doit avoir des champs : title (String) et description (String).
Ajouter des données d'exemple: Remplissez ces classes avec des données d'exemple que nous allons récupérer simultanément en utilisant Future.wait dans notre application Flutter.
Obtenez vos identifiants Back4app: Accédez aux paramètres de votre projet pour récupérer votre ID d'application et votre clé client, dont vous aurez besoin pour connecter votre application Flutter à Back4app.
Étape 2 – Configuration de votre projet Flutter
Créer un nouveau projet Flutter: Ouvrez votre terminal ou invite de commande et exécutez :
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
Initialiser Parse dans votre application: Dans lib/main.dart, importez le SDK Parse et initialisez-le dans la fonction main :
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());
﻿
Remplacez 'YOUR_BACK4APP_APP_ID' et 'YOUR_BACK4APP_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 3 – Récupération des données de manière concurrente avec Future.wait
Créez le widget TaskProjectScreen: Dans lib/main.dart, ajoutez un nouveau widget qui récupérera les données des classes Task et Project de manière concurrente :
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'),
            )),
      ],
    );
  }
}
﻿
Ce widget récupère les tâches et les projets de manière concurrente en utilisant Future.wait, réduisant le temps d'attente total en gérant les deux requêtes simultanément.
Étape 4 – Tester et exécuter votre application
Exécutez votre application en utilisant flutter run.
Vous devriez voir une liste de tâches et de projets affichée à l'écran. Les deux ensembles de données sont récupérés simultanément, rendant le processus de récupération des données plus rapide et plus efficace.
Conclusion
Dans ce tutoriel, vous avez appris à utiliser Future.wait pour optimiser les opérations asynchrones dans votre application Flutter. En récupérant des données de plusieurs sources simultanément et en intégrant avec Back4app, vous avez rendu votre application plus réactive et réduit le temps d'attente global pour vos utilisateurs.
Utiliser Future.wait en combinaison avec un backend robuste comme Back4app vous permet de gérer efficacement plusieurs tâches asynchrones et d'améliorer les performances de vos applications Flutter. Pour plus de détails sur l'utilisation de Back4app avec Flutter, consultez la documentation Flutter de Back4app. Bon codage!
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment utiliser les Completers Flutter avec un backend sur Back4app
Développement d'applications Javascript en temps réel