Plus
Comment utiliser la gestion des données dans Flutter en utilisant List.generate avec Back4app

11min
Introduction
Dans Flutter, la manière la plus simple de créer une liste dynamique est d'utiliser List.generate. Cela aide, surtout lorsqu'il s'agit de données récupérées via un service back-end comme Back4app. Que ce soit des éléments d'interface utilisateur dynamiques, la gestion de plusieurs entrées de données, ou l'optimisation des requêtes réseau, List.generate facilitera au moins votre code et améliorera les performances.

Dans ce tutoriel, nous allons voir comment gérer efficacement les données back-end en utilisant List.generate dans Flutter. Dans cet exemple, vous verrez comment créer une simple application Flutter avec Back4App pour récupérer et afficher dynamiquement les avis des utilisateurs, en les notant au passage. Vous apprendrez à traiter les données back-end, à optimiser les requêtes réseau et à effectuer des opérations par lots avec List.generate.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Un 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, widgets Flutter et programmation asynchrone.
É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 une classe Parse: Dans votre projet Back4app, créez une nouvelle classe Parse nommée Review. Cette classe stockera les avis des utilisateurs pour différents articles (par exemple, produits, films, etc.). Ajoutez les champs suivants :
nom d'utilisateur (String) : Le nom de l'utilisateur qui a soumis l'avis.
évaluation (Number) : L'évaluation donnée par l'utilisateur, généralement une valeur entre 1 et 5.
commentaire (String) : Le texte ou le commentaire de l'avis.
Ajouter des données d'exemple: Remplissez la Review classe avec des données d'exemple à utiliser dans votre 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 :
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReviewScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReviewScreen(),
    );
  }
}
﻿
Remplacez 'YOUR_BACK4APP_APP_ID' et 'YOUR_BACK4APP_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 3 – Récupération et affichage des données à l'aide de List.generate
Créer le widget ReviewScreen: Dans lib/main.dart, ajoutez un nouveau widget qui récupérera les avis de Back4app et les affichera en utilisant List.generate:
Dart
class ReviewScreen extends StatefulWidget {
  @override
  _ReviewScreenState createState() => _ReviewScreenState();
}

class _ReviewScreenState extends State<ReviewScreen> {
  List<ParseObject>? reviews;

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

  Future<void> fetchReviews() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        reviews = response.results as List<ParseObject>;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Reviews')),
      body: reviews == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: reviews!.length,
              itemBuilder: (context, index) {
                final review = reviews![index];
                return ReviewTile(
                  username: review.get<String>('username') ?? 'Anonymous',
                  rating: review.get<int>('rating') ?? 0,
                  comment: review.get<String>('comment') ?? '',
                );
              },
            ),
    );
  }
}



class ReviewTile extends StatelessWidget {
  final String username;
  final int rating;
  final String comment;

  ReviewTile({required this.username, required this.rating, required this.comment});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              username,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 5),
            Row(
              children: List.generate(5, (index) {
                return Icon(
                  index < rating ? Icons.star : Icons.star_border,
                  color: Colors.amber,
                );
              }),
            ),
            SizedBox(height: 10),
            Text(comment),
          ],
        ),
      ),
    );
  }
}
class ReviewScreen extends StatefulWidget {
  @override
  _ReviewScreenState createState() => _ReviewScreenState();
}

class _ReviewScreenState extends State<ReviewScreen> {
  List<ParseObject>? reviews;

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

  Future<void> fetchReviews() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        reviews = response.results as List<ParseObject>;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Reviews')),
      body: reviews == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: reviews!.length,
              itemBuilder: (context, index) {
                final review = reviews![index];
                return ReviewTile(
                  username: review.get<String>('username') ?? 'Anonymous',
                  rating: review.get<int>('rating') ?? 0,
                  comment: review.get<String>('comment') ?? '',
                );
              },
            ),
    );
  }
}



class ReviewTile extends StatelessWidget {
  final String username;
  final int rating;
  final String comment;

  ReviewTile({required this.username, required this.rating, required this.comment});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              username,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 5),
            Row(
              children: List.generate(5, (index) {
                return Icon(
                  index < rating ? Icons.star : Icons.star_border,
                  color: Colors.amber,
                );
              }),
            ),
            SizedBox(height: 10),
            Text(comment),
          ],
        ),
      ),
    );
  }
}
﻿
Dans cet exemple, ReviewTile est un widget personnalisé qui affiche l'avis d'un utilisateur. La note par étoiles est générée dynamiquement en utilisant List.generate, créant une rangée d'icônes d'étoiles basée sur la valeur de rating récupérée du backend.
Étape 4 – Optimisation de la récupération des données avec List.generate et Future.wait
Dans les cas où vous devez récupérer des données à partir de plusieurs points de terminaison backend simultanément, vous pouvez utiliser List.generate en combinaison avec Future.wait pour optimiser le processus.
Récupération de plusieurs enregistrements liés: Imaginez que vous avez une autre classe nommée Product et que vous souhaitez récupérer des avis liés pour plusieurs produits à la fois. Vous pouvez utiliser List.generate pour initier ces demandes simultanément :
Dart
Future<void> fetchMultipleProductsReviews(List<String> productIds) async {
  List<Future<List<ParseObject>>> requests = List.generate(productIds.length, (index) {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('productId', productIds[index]);
    return query.query().then((response) => response.results as List<ParseObject>);
  });

  List<List<ParseObject>> allReviews = await Future.wait(requests);

  setState(() {
    _allProductReviews = allReviews;
  });
}
Future<void> fetchMultipleProductsReviews(List<String> productIds) async {
  List<Future<List<ParseObject>>> requests = List.generate(productIds.length, (index) {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('productId', productIds[index]);
    return query.query().then((response) => response.results as List<ParseObject>);
  });

  List<List<ParseObject>> allReviews = await Future.wait(requests);

  setState(() {
    _allProductReviews = allReviews;
  });
}
﻿
Cette approche réduit le temps d'attente global en récupérant les données pour tous les produits simultanément.
Étape 5 – Effectuer des opérations par lots en utilisant List.generate
Si vous devez effectuer des mises à jour ou des suppressions par lots sur plusieurs enregistrements récupérés du backend, List.generate peut simplifier le processus.
Exemple de mise à jour par lots: Voici comment vous pourriez mettre à jour le statut de plusieurs enregistrements en une seule fois :
Dart
Future<void> updateMultipleReviews(List<String> reviewIds, String newStatus) async {
  List<Future<ParseObject>> updateRequests = List.generate(reviewIds.length, (index) {
    ParseObject review = ParseObject('Review')..objectId = reviewIds[index];
    review.set('status', newStatus);
    return review.save();
  });

  await Future.wait(updateRequests);
  print('All reviews updated');
}
Future<void> updateMultipleReviews(List<String> reviewIds, String newStatus) async {
  List<Future<ParseObject>> updateRequests = List.generate(reviewIds.length, (index) {
    ParseObject review = ParseObject('Review')..objectId = reviewIds[index];
    review.set('status', newStatus);
    return review.save();
  });

  await Future.wait(updateRequests);
  print('All reviews updated');
}
﻿
Utiliser List.generate ici vous permet d'effectuer efficacement des opérations sur un grand nombre d'enregistrements en une seule opération.
Étape 6 – Tester et exécuter votre application
Exécutez votre application en utilisant flutter run.
Vous devriez voir une liste d'avis d'utilisateurs, chaque avis affichant une note étoilée générée dynamiquement en utilisant List.generate. Si vous avez implémenté les opérations par lots et l'exemple de multi-récupération, testez également ces scénarios pour vous assurer que tout fonctionne correctement.
Conclusion
Dans ce tutoriel, vous avez appris à utiliser List.generate dans Flutter pour gérer et afficher efficacement les données récupérées d'un backend, comme Back4app. En utilisant List.generate, vous pouvez créer des éléments d'interface utilisateur dynamiques, optimiser la récupération de données et effectuer des opérations par lots de manière propre et maintenable. Cette approche améliore non seulement les performances de votre application, mais garde également votre code organisé et facile à gérer.
Pour plus d'informations sur l'utilisation de Back4app avec Flutter, consultez la documentation Back4app Flutter. Bon codage!
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Construire une plateforme de blog SPA avec ReactJS et Back4App
Comment intégrer l'IA générative dans votre application Flutter en utilisant Firebase Vertex AI