Mengenal ListView: Widget Untuk Menampilkan Daftar Item Pada Flutter

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu ListView : Widget Untuk Menampilkan Daftar Item Pada Flutter. Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga.

Apa itu ListView?

ListView adalah widget yang digunakan untuk membantu developer dalam menampilkan daftar item dalam aplikasi. Widget ini dibuat untuk memungkinkan developer untuk menampilkan item secara horizontal maupun vertikal, widget ini juga dapat digunakan untuk menampilkan data dalam jumlah yang besar, contohnya seperti kontak, etalase produk, daftar berita, dan lain sebagainya.

Jenis dan Langkah Membuat ListView:

1. ListView

ListView adalah jenis yang digunakan untuk menampilkan daftar item yang dibuat menjadi vertikal dan horizontal.

Contoh ListView :

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
  ),
  home: MainApp(),
));

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BuildWithAngga"),
      ),
      body: ListView(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text("Latihan Flutter 1"),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text("Latihan Flutter 2"),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text("Latihan Flutter 3"),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text("Latihan Flutter 4"),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text("Latihan Flutter 5"),
          ),
        ],
      ),
    );
  }
}

Tambahan untuk teman-teman :

• Children : Properti yang digunakan untuk daftar isi yang akan ditampilkan pada ListView
• Padding : Properti yang digunakan untuk memberikan jarak atau menambahkan ruang kosong antara konten ListView.

Output ListView :

2. ListView.Builder

ListView.builder merupakan jenis yang lebih dinamis dibanding ListView biasa, karena konsep sebenarnya hampir mirip seperti RecyclerView di Android, pertama membuat view holder kemudian data yang ditampilkan berbentuk collection.

Contoh ListView.builder:

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
// This widget is the root
// of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "ListView.builder",
        theme: ThemeData(primarySwatch: Colors.blue),
        debugShowCheckedModeBanner: false,
        // home : new ListViewBuilder(),  NO Need To Use Unnecessary New Keyword
        home: const ListViewBuilder());
  }
}
 
class ListViewBuilder extends StatelessWidget {
  const ListViewBuilder({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("BuildWithAngga")),
      body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
                leading: const Icon(Icons.list),
                trailing: const Text(
                  "BWA",
                  style: TextStyle(color: Colors.blue, fontSize: 15),
                ),
                title: Text("Latihan Flutter $index"));
          }),
    );
  }
}

Output ListView.Builder:

3. ListView.separated

ListView.separated adalah jenis ListView yang digunakan untuk membuat daftar item memiliki garis pemisah di antara daftar item. Sehingga dengan adanya garis pemisah ListView.separated membuat desain daftar item menjadi lebih kompleks. Contohnya seperti setiap daftar item dibedakan dengan garis pemisah, warna latar belakang yang berbeda dengan daftar item, atau tambahan widget yang berbeda di antara daftar item.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: ListView.separated(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Text('Latihan Flutter $index');
          },
          separatorBuilder: (context, index) {
            return Divider();
          },
        ),
      ),
    );
  }
}

Tambahan untuk teman-teman :

1. Jika teman-teman ingin membuat daftar item dengan panjang yang lebih dinamis, teman-teman dapat menggunakan ListView.builder.
2. ListView.separated membutuhkan separatorBuilder.

Output ListView.separated:

Kesimpulan

ListView memiliki banyak manfaat untuk membantu developer dalam menampilkan daftar kontak, etalase produk, dan sebagainya. Selain itu, dengan ListView dapat membuat performa aplikasi menjadi lebih baik, ListView yang mudah untuk dikembangkan dan digunakan, serta ListView yang serbaguna. Sehingga penggunaan ListView, ListView.builder, ListView.separated tinggal disesuaikan dengan kebutuhan developer saat mengembangkan aplikasi mobile.

Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.