Di più
Come utilizzare la gestione dei dati in Flutter usando List.generate con Back4app

10min
Introduzione
In Flutter, il modo più semplice per creare liste dinamiche è utilizzare List.generate. Aiuta, soprattutto quando si tratta di dati recuperati tramite un servizio back-end come Back4app. Che si tratti di elementi UI dinamici, gestione di più voci di dati o ottimizzazione delle richieste di rete, List.generate almeno semplificherà il tuo codice e migliorerà le prestazioni.

In questo tutorial, vedremo come gestire in modo efficiente i dati del backend utilizzando List.generate in Flutter. In questo esempio, vedrai come creare una semplice applicazione Flutter con Back4App per recuperare e visualizzare dinamicamente le recensioni degli utenti, valutandole nel processo. Imparerai a elaborare i dati del backend, ottimizzare le richieste di rete e gestire operazioni in batch con List.generate.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e programmazione asincrona.
Passo 1 – Configurare il tuo backend Back4app
Crea un progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea una classe Parse: Nel tuo progetto Back4app, crea una nuova classe Parse chiamata Review. Questa classe memorizzerà le recensioni degli utenti per diversi articoli (ad es., prodotti, film, ecc.). Aggiungi i seguenti campi:
username (String): Il nome dell'utente che ha inviato la recensione.
rating (Numero): La valutazione data dall'utente, tipicamente un valore tra 1 e 5.
comment (String): Il testo della recensione o commento.
Aggiungi dati di esempio: Popola la Review classe con dati di esempio da utilizzare nella tua app Flutter.
Ottieni le tue credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID applicazione e la chiave client, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurare il tuo progetto Flutter
Crea un Nuovo Progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Aggiungi Dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
Inizializza Parse nella Tua App: In lib/main.dart, importa il SDK di Parse e inizializzalo nella funzione main:
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(),
    );
  }
}
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Recupero e Visualizzazione dei Dati Utilizzando List.generate
Crea il widget ReviewScreen: In lib/main.dart, aggiungi un nuovo widget che recupererà le recensioni da Back4app e le visualizzerà utilizzando 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 questo esempio, ReviewTile è un widget personalizzato che visualizza la recensione di un utente. La valutazione in stelle è generata dinamicamente utilizzando List.generate, creando una riga di icone a stella basata sul valore di rating recuperato dal backend.
Passo 4 – Ottimizzazione del Recupero Dati con List.generate e Future.wait
Nei casi in cui è necessario recuperare dati da più endpoint backend simultaneamente, è possibile utilizzare List.generate in combinazione con Future.wait per ottimizzare il processo.
Recupero di Record Correlati Multipli: Immagina di avere un'altra classe chiamata Product e vuoi recuperare recensioni correlate per più prodotti contemporaneamente. Puoi utilizzare List.generate per avviare queste richieste in modo concorrente:
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;
  });
}
﻿
Questo approccio riduce il tempo di attesa complessivo recuperando i dati per tutti i prodotti simultaneamente.
Passo 5 – Esecuzione di Operazioni in Batch Utilizzando List.generate
Se hai bisogno di eseguire aggiornamenti o cancellazioni in batch su più record recuperati dal backend, List.generate può semplificare il processo.
Esempio di Aggiornamento in Batch: Ecco come potresti aggiornare lo stato di più record in una sola volta:
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');
}
﻿
Utilizzare List.generate qui consente di eseguire operazioni in modo efficiente su un gran numero di record in un'unica operazione.
Passo 6 – Testare e Eseguire la Tua App
Esegui la tua app utilizzando flutter run.
Dovresti vedere un elenco di recensioni degli utenti, con ogni recensione che mostra una valutazione a stelle generata dinamicamente utilizzando List.generate. Se hai implementato le operazioni in batch e l'esempio di multi-fetch, testa anche quegli scenari per assicurarti che tutto funzioni correttamente.
Conclusione
In questo tutorial, hai imparato come utilizzare List.generate in Flutter per gestire e visualizzare in modo efficiente i dati recuperati da un backend, come Back4app. Utilizzando List.generate, puoi creare elementi UI dinamici, ottimizzare il recupero dei dati e eseguire operazioni in batch in modo pulito e manutenibile. Questo approccio non solo migliora le prestazioni della tua app, ma mantiene anche il tuo codice organizzato e facile da gestire.
Per ulteriori informazioni su come utilizzare Back4app con Flutter, dai un'occhiata alla documentazione di Back4app per Flutter. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Crea una piattaforma di blogging SPA con ReactJS e Back4App
AVANTI IL PROSSIMO
Come integrare l'IA generativa nella tua app Flutter utilizzando Firebase Vertex AI