How to use Data Handling in Flutter Using List.generate with Back4app

10min
Introduction
In Flutter, the simplest way for dynamic list creation is by using List.generate. It helps, especially when dealing with data fetched through a back-end service like Back4app. Whether it is dynamic UI elements, handling several entries of data, or optimization of network requests, List.generate will at least ease your code and boost performance.

In this tutorial, we are going to see how to handle efficiently the backend data using List.generate in Flutter. In this example, you will see how to create a simple Flutter application with Back4App to fetch and display user reviews dynamically, rating them in the process. You will learn about processing backend data, network request optimization, and batch operations with List.generate.
Prerequisites
To complete this tutorial, you will need:
A Back4app account. Sign up for a free account at Back4app.com.
A Flutter development environment set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Dart, Flutter widgets, and asynchronous programming.
Step 1 – Setting Up Your Back4app Backend
Create a Back4app Project: Log in to your Back4app account and create a new project.
Create a Parse Class: In your Back4app project, create a new Parse Class named Review. This class will store user reviews for different items (e.g., products, movies, etc.). Add the following fields:
username (String): The name of the user who submitted the review.
rating (Number): The rating given by the user, typically a value between 1 and 5.
comment (String): The review text or comment.
Add Sample Data: Populate the Review class with sample data to use in your Flutter app.
Get Your Back4app Credentials: Navigate to your project settings to retrieve your Application ID and Client Key, which you’ll need to connect your Flutter app to Back4app.
Step 2 – Setting Up Your Flutter Project
Create a New Flutter Project: Open your terminal or command prompt and run:
Add Dependencies: Open pubspec.yaml and add the following dependencies:
Initialize Parse in Your App: In lib/main.dart, import the Parse SDK and initialize it in the main function:
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(),
    );
  }
}
﻿
Replace 'YOUR_BACK4APP_APP_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual Back4app credentials.
Step 3 – Fetching and Displaying Data Using List.generate
Create the ReviewScreen Widget: In lib/main.dart, add a new widget that will fetch reviews from Back4app and display them using 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 this example, ReviewTile is a custom widget that displays a user’s review. The star rating is dynamically generated using List.generate, creating a row of star icons based on the rating value retrieved from the backend.
Step 4 – Optimizing Data Fetching with List.generate and Future.wait
In cases where you need to fetch data from multiple backend endpoints simultaneously, you can use List.generate in combination with Future.wait to optimize the process.
Fetching Multiple Related Records: Imagine you have another class named Product and you want to fetch related reviews for multiple products at once. You can use List.generate to initiate these requests concurrently:
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;
  });
}
﻿
This approach reduces the overall wait time by fetching data for all products simultaneously.
Step 5 – Performing Batch Operations Using List.generate
If you need to perform batch updates or deletions on multiple records fetched from the backend, List.generate can simplify the process.
Batch Update Example: Here’s how you might update the status of multiple records in one go:
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');
}
﻿
Using List.generate here allows you to efficiently perform operations on a large number of records in a single operation.
Step 6 – Testing and Running Your App
Run your app using flutter run.
You should see a list of user reviews, with each review showing a dynamically generated star rating using List.generate. If you implemented the batch operations and multi-fetch example, test those scenarios as well to ensure everything works correctly.
Conclusion
In this tutorial, you learned how to use List.generate in Flutter to efficiently handle and display data retrieved from a backend, like Back4app. By using List.generate, you can create dynamic UI elements, optimize data fetching, and perform batch operations in a clean and maintainable way. This approach not only improves your app's performance but also keeps your codebase organized and easy to manage.
For more information on using Back4app with Flutter, check out the Back4app Flutter documentation. Happy coding!
Updated 09 Jan 2025
Did this page help you?
Building a Blogging Platform SPA with ReactJS and Back4App
How to Integrate Generative AI in Your Flutter App Using Firebase Vertex AI