Cara menggunakan Pengolahan Data di Flutter Menggunakan List.generate dengan Back4app

10min
Pendahuluan
Dalam Flutter, cara paling sederhana untuk membuat daftar dinamis adalah dengan menggunakan List.generate. Ini sangat membantu, terutama saat berurusan dengan data yang diambil melalui layanan backend seperti Back4app. Apakah itu elemen UI dinamis, menangani beberapa entri data, atau optimasi permintaan jaringan, List.generate setidaknya akan mempermudah kode Anda dan meningkatkan kinerja.

Dalam tutorial ini, kita akan melihat bagaimana menangani data backend secara efisien menggunakan List.generate di Flutter. Dalam contoh ini, Anda akan melihat bagaimana cara membuat aplikasi Flutter sederhana dengan Back4App untuk mengambil dan menampilkan ulasan pengguna secara dinamis, memberi peringkat di dalam prosesnya. Anda akan belajar tentang pemrosesan data backend, optimasi permintaan jaringan, dan operasi batch dengan List.generate.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
Akun Back4app. Daftar untuk akun gratis di Back4app.com.
Lingkungan pengembangan Flutter yang diatur di mesin lokal Anda. Ikuti panduan instalasi Flutter jika Anda belum mengaturnya.
Pengetahuan dasar tentang Dart, widget Flutter, dan pemrograman asinkron.
Langkah 1 – Mengatur Backend Back4app Anda
Buat Proyek Back4app: Masuk ke akun Back4app Anda dan buat proyek baru.
Buat Kelas Parse: Di proyek Back4app Anda, buat Kelas Parse baru bernama Review. Kelas ini akan menyimpan ulasan pengguna untuk berbagai item (misalnya, produk, film, dll.). Tambahkan bidang berikut:
username (String): Nama pengguna yang mengirimkan ulasan.
rating (Number): Penilaian yang diberikan oleh pengguna, biasanya nilai antara 1 dan 5.
comment (String): Teks ulasan atau komentar.
Tambahkan Data Contoh: Isi kelas Review dengan data contoh untuk digunakan dalam aplikasi Flutter Anda.
Dapatkan Kredensial Back4app Anda: Arahkan ke pengaturan proyek Anda untuk mengambil ID Aplikasi dan Kunci Klien Anda, yang Anda perlukan untuk menghubungkan aplikasi Flutter Anda ke Back4app.
Langkah 2 – Mengatur Proyek Flutter Anda
Buat Proyek Flutter Baru: Buka terminal atau command prompt Anda dan jalankan:
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
Inisialisasi Parse di Aplikasi Anda: Di lib/main.dart, impor SDK Parse dan inisialisasi di main fungsi:
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(),
    );
  }
}
﻿
Ganti 'YOUR_BACK4APP_APP_ID' dan 'YOUR_BACK4APP_CLIENT_KEY' dengan kredensial Back4app Anda yang sebenarnya.
Langkah 3 – Mengambil dan Menampilkan Data Menggunakan List.generate
Buat Widget ReviewScreen: Di lib/main.dart, tambahkan widget baru yang akan mengambil ulasan dari Back4app dan menampilkannya menggunakan 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),
          ],
        ),
      ),
    );
  }
}
﻿
Dalam contoh ini, ReviewTile adalah widget kustom yang menampilkan ulasan pengguna. Penilaian bintang dihasilkan secara dinamis menggunakan List.generate, membuat baris ikon bintang berdasarkan rating nilai yang diambil dari backend.
Langkah 4 – Mengoptimalkan Pengambilan Data dengan List.generate dan Future.wait
Dalam kasus di mana Anda perlu mengambil data dari beberapa endpoint backend secara bersamaan, Anda dapat menggunakan List.generate dalam kombinasi dengan Future.wait untuk mengoptimalkan proses.
Mengambil Beberapa Rekaman Terkait: Bayangkan Anda memiliki kelas lain bernama Product dan Anda ingin mengambil ulasan terkait untuk beberapa produk sekaligus. Anda dapat menggunakan List.generate untuk memulai permintaan ini secara bersamaan:
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;
  });
}
﻿
Pendekatan ini mengurangi waktu tunggu secara keseluruhan dengan mengambil data untuk semua produk secara bersamaan.
Langkah 5 – Melakukan Operasi Batch Menggunakan List.generate
Jika Anda perlu melakukan pembaruan atau penghapusan batch pada beberapa rekaman yang diambil dari backend, List.generate dapat menyederhanakan proses.
Contoh Pembaruan Batch: Berikut adalah cara Anda dapat memperbarui status beberapa rekaman sekaligus:
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');
}
﻿
Menggunakan List.generate di sini memungkinkan Anda untuk melakukan operasi secara efisien pada sejumlah besar catatan dalam satu operasi.
Langkah 6 – Menguji dan Menjalankan Aplikasi Anda
Jalankan aplikasi Anda menggunakan flutter run.
Anda harus melihat daftar ulasan pengguna, dengan setiap ulasan menunjukkan peringkat bintang yang dihasilkan secara dinamis menggunakan List.generate. Jika Anda menerapkan operasi batch dan contoh multi-fetch, uji skenario tersebut juga untuk memastikan semuanya berfungsi dengan baik.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana menggunakan List.generate di Flutter untuk menangani dan menampilkan data yang diambil dari backend, seperti Back4app. Dengan menggunakan List.generate, Anda dapat membuat elemen UI dinamis, mengoptimalkan pengambilan data, dan melakukan operasi batch dengan cara yang bersih dan mudah dipelihara. Pendekatan ini tidak hanya meningkatkan kinerja aplikasi Anda tetapi juga menjaga basis kode Anda terorganisir dan mudah dikelola.
Untuk informasi lebih lanjut tentang menggunakan Back4app dengan Flutter, lihat dokumentasi Back4app Flutter. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Platform Blogging SPA dengan ReactJS dan Back4App
BERIKUTNYA
Cara Mengintegrasikan AI Generatif di Aplikasi Flutter Anda Menggunakan Firebase Vertex AI