Tutorial Flutter Menampilkan List dengan ListView Builder

Tutorial Flutter Menampilkan List dengan ListView Builder

Codingtive.com - ListView pada Flutter digunakan untuk menampilkan widget yang scrollable, baik secara horizontal maupun vertical. Namun bagaimana apabila list yang ingin ditampilkan bersifat dinamis ? Untuk membuat list yang dinamis kalian dapat menggunakan ListView Builder.

Sebelum mencoba, pastikan laptop kalian sudah terinstal Flutter, dan mulai siapkan emulator atau device untuk menampilkan aplikasinya.

Berikut langkah-langkah yang dapat kalian ikuti :

1. Buat project 

Langkah yang paling pertama yaitu membuat project Flutter, kalian dapat menggunakan Android Studio atau edittor yang lain. Jika kalian belum mengetahui cara membuat project di Flutter, kalian dapat mempelajarinya cara instal dan membuat project Flutter. Untuk nama projectnya sesuai keinginan teman-teman, disini saya mencontohkan learn_listview.

2. Pastikan project berhasil dibuat

Ketika membuat project, pastikan laptop kalian terkoneksi dengan internet, dan setelah proses download selesai, coba jalankan dengan emulator atau device dan pastikan dapat berjalan. Ketika pertama kali membuat project, sudah disediakan tampilan awal.

3. Buat ListView

Selanjutnya, buka folder lib > main.dart, hapus semua isinya. Pertama yang akan kita tambahkan yaitu import library dan template layout dasar. Layout dasar berisi App Bar dan body yang akan digunakan untuk menampilkan list.

Tambahkan kode berikut untuk membuat AppBar dan body :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Builder',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text(
            'ListView Builder',
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: _PageList(),
      ),
    );
  }
}

Pada bagian body memanggil class _PageList, karena list yang ditampilkan dinamis maka kita akan membuat StatefulWidget.  StatefulWidget yang akan kita buat ada 2 class, pertama tambahkan kode berikut diluar class MyApp :

class _PageList extends StatefulWidget {
  @override
  _PageListState createState() => _PageListState();
}

Class _PageList melakukan extends StatefulWidget, kemudian untuk menangani state dan membuat ListView builder kita akan menambahkan 1 class baru dibawahnya, kodenya seperti berikut :

class _PageListState extends State<_PageList> {
  
  List languages = [
    "Dart",
    "Kotlin",
    "Java",
    "PHP",
    "Swift",
    "Javascript",
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[300],
      child: ListView.builder(
        itemCount: languages.length,
        itemBuilder: (BuildContext context, int index) {
          final number = index+1;
          final language = languages[index].toString();
           return Card(
             child: ListTile(
               leading: Text(number.toString()),
               title: Text(language),
               trailing: Icon(Icons.check),
              ),
           );
         },
       ),
    );
  }
}

Penjelasan dari kode diatas :

• Pertama, membuat variable languages dengan type data List yang berisi data yang akan ditampilkan. 
• itemCount : untuk menghitung jumlah data yang akan ditampilkan .   
• itemBuilder : untuk membuat item dari ListView. 
• Untuk item yang ditampilkan dalam bentuk Card yang isinya menggunakan widget ListTile.  
• leading : untuk widget sebelah left / kiri. 
• title : untuk widget title. 
• trailing : untuk widget  sebelah right / kanan.

Untuk kode lengkapnya pada file main.dart seperti berikut :

Sekarang coba kalian jalankan pada emulator atau device, maka hasilnya seperti berikut :

Sekian Tutorial Flutter Menampilkan List dengan ListView Builder, apabila teman-teman ada pertanyaan atau mau diskusi bisa menggunakan kolom komentar. Jangan lupa untuk berlangganan dengan codingtive melalui email untuk mendapatkan update artikel dan tutorial. Terima kasih

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: