Mehr
Wie man Datenverarbeitung in Flutter mit List.generate und Back4app verwendet

11min
Einführung
In Flutter ist der einfachste Weg zur dynamischen Listen Erstellung die Verwendung von List.generate. Es hilft besonders beim Umgang mit Daten, die über einen Backend-Service wie Back4app abgerufen werden. Ob es sich um dynamische UI-Elemente, die Verarbeitung mehrerer Dateneinträge oder die Optimierung von Netzwerk-Anfragen handelt, List.generate wird zumindest Ihren Code erleichtern und die Leistung steigern.

In diesem Tutorial werden wir sehen, wie man die Backend-Daten effizient mit List.generate in Flutter verarbeitet. In diesem Beispiel werden Sie sehen, wie man eine einfache Flutter-Anwendung mit Back4App erstellt, um Benutzerbewertungen dynamisch abzurufen und anzuzeigen und sie dabei zu bewerten. Sie werden lernen, wie man Backend-Daten verarbeitet, Netzwerk-Anfragen optimiert und Batch-Operationen mit List.generate.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto an unter Back4app.com.
Eine Flutter-Entwicklungsumgebung, die auf Ihrem lokalen Computer eingerichtet ist. Folgen Sie der Flutter-Installationsanleitung , wenn Sie sie noch nicht eingerichtet haben.
Grundkenntnisse in Dart, Flutter-Widgets und asynchroner Programmierung.
Schritt 1 – Einrichten Ihres Back4app-Backends
Erstellen Sie ein Back4app-Projekt: Melden Sie sich bei Ihrem Back4app-Konto an und erstellen Sie ein neues Projekt.
Erstellen Sie eine Parse-Klasse: Erstellen Sie in Ihrem Back4app-Projekt eine neue Parse-Klasse mit dem Namen Review. Diese Klasse speichert Benutzerbewertungen für verschiedene Artikel (z. B. Produkte, Filme usw.). Fügen Sie die folgenden Felder hinzu:
benutzername (String): Der Name des Benutzers, der die Bewertung abgegeben hat.
bewertung (Zahl): Die Bewertung, die der Benutzer abgegeben hat, typischerweise ein Wert zwischen 1 und 5.
kommentar (String): Der Bewertungstext oder Kommentar.
Beispieldaten hinzufügen: Füllen Sie die Review-Klasse mit Beispieldaten, die Sie in Ihrer Flutter-App verwenden können.
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 die Eingabeaufforderung und führen Sie aus:
Abhängigkeiten hinzufügen: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
Initialisieren Sie Parse in Ihrer App: In lib/main.dart, importieren Sie das Parse SDK und initialisieren Sie es in der main-Funktion:
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(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Daten abrufen und mit List.generate anzeigen
Erstellen Sie das ReviewScreen-Widget: In lib/main.dart, fügen Sie ein neues Widget hinzu, das Bewertungen von Back4app abruft und sie mit 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),
          ],
        ),
      ),
    );
  }
}
﻿
In diesem Beispiel ist ReviewTile ein benutzerdefiniertes Widget, das die Bewertung eines Benutzers anzeigt. Die Sternebewertung wird dynamisch mit List.generate, wodurch eine Reihe von Sternsymbolen basierend auf dem rating-Wert erstellt wird, der vom Backend abgerufen wird.
Schritt 4 – Optimierung des Datenabrufs mit List.generate und Future.wait
In Fällen, in denen Sie Daten von mehreren Backend-Endpunkten gleichzeitig abrufen müssen, können Sie List.generate in Kombination mit Future.wait verwenden, um den Prozess zu optimieren.
Abrufen mehrerer verwandter Datensätze: Stellen Sie sich vor, Sie haben eine andere Klasse namens Product und möchten verwandte Bewertungen für mehrere Produkte gleichzeitig abrufen. Sie können List.generate verwenden, um diese Anfragen gleichzeitig zu starten:
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;
  });
}
﻿
Dieser Ansatz reduziert die Gesamtwartezeit, indem Daten für alle Produkte gleichzeitig abgerufen werden.
Schritt 5 – Durchführung von Batch-Operationen mit List.generate
Wenn Sie Batch-Aktualisierungen oder -Löschungen für mehrere Datensätze durchführen müssen, die vom Backend abgerufen wurden, kann List.generate den Prozess vereinfachen.
Beispiel für eine Batch-Aktualisierung: So könnten Sie den Status mehrerer Datensätze auf einmal aktualisieren:
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');
}
﻿
Die Verwendung von List.generate hier ermöglicht es Ihnen, effizient Operationen an einer großen Anzahl von Datensätzen in einer einzigen Operation durchzuführen.
Schritt 6 – Testen und Ausführen Ihrer App
Führen Sie Ihre App mit flutter run aus.
Sie sollten eine Liste von Benutzerbewertungen sehen, wobei jede Bewertung eine dynamisch generierte Sternebewertung mit List.generate. Wenn Sie die Batch-Operationen und das Multi-Fetch-Beispiel implementiert haben, testen Sie auch diese Szenarien, um sicherzustellen, dass alles korrekt funktioniert.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie List.generate in Flutter verwenden, um Daten, die von einem Backend wie Back4app abgerufen werden, effizient zu verarbeiten und anzuzeigen. Durch die Verwendung von List.generate, können Sie dynamische UI-Elemente erstellen, das Abrufen von Daten optimieren und Batch-Operationen auf eine saubere und wartbare Weise durchführen. Dieser Ansatz verbessert nicht nur die Leistung Ihrer App, sondern hält auch Ihren Code sauber und leicht zu verwalten.
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?
Erstellung einer Blogging-Plattform SPA mit ReactJS und Back4App
ALS NÄCHSTES
Wie man generative KI in Ihre Flutter-App mit Firebase Vertex AI integriert