Tutorial Flutter Menampilkan List Dengan Listview Builder

Tutorial Flutter Menampilkan List dengan ListView Builder

 - ListView pada Flutter dipakai untuk menampilkan widget yang scrollable, baik secara horizontal maupun vertical. Namun bagaimana apabila list yang ingin ditampilkan bersifat dinamis ? Untuk menciptakan list yang dinamis kalian sanggup memakai ListView Builder.

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

Berikut langkah-langkah yang sanggup kalian ikuti :

1. Buat project 

Langkah yang paling pertama adalah menciptakan project Flutter, kalian sanggup memakai Android Studio atau edittor yang lain. Jika kalian belum mengetahui cara menciptakan project di Flutter, kalian sanggup mempelajarinya cara instal dan menciptakan project Flutter. Untuk nama projectnya sesuai cita-cita teman-teman, disini aku mencontohkan learn_listview.

2. Pastikan project berhasil dibuat

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

3. Buat ListView

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

Tambahkan instruksi berikut untuk menciptakan 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 bab body memanggil class _PageList, karena list yang ditampilkan dinamis maka kita akan menciptakan StatefulWidget.  StatefulWidget yang akan kita buat ada 2 class, pertama tambahkan instruksi berikut diluar class MyApp :

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

Class _PageList melaksanakan extends StatefulWidget, kemudian untuk menangani state dan menciptakan ListView builder kita akan menambahkan 1 class gres dibawahnya, kodenya menyerupai 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) {           akibat number = index+1;           akibat language = languages[index].toString();            return Card(              child: ListTile(                leading: Text(number.toString()),                title: Text(language),                trailing: Icon(Icons.check),               ),            );          },        ),     );   } } 

Penjelasan dari instruksi diatas :

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

Untuk instruksi lengkapnya pada file main.dart menyerupai berikut :

Sekarang coba kalian jalankan pada emulator atau device, maka balasannya menyerupai berikut :

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

Share this post