 |
Perbedaan ListView dan ListView Builder
Baik ListView atau ListView builder, keduanya sama-sama digunakan untuk membuat daftar atau list data yang dapat discroll. Tanpa menggunakan widget ini, sisa widget yang tidak terlihat di layar tidak dapat discroll ke bawah. Widget yang tidak terlihat atau kelebihan akan ditandai dengan peringatan bottom overload. Sedangkan perbedaannya:ListView biasa digunakan untuk membuat data list statis atau data list yang tidak terlalu panjang. Karena jika menggunakan ListView untuk data yang terlalu besar, maka akan menurunkan performa aplikasi, alasannya karena semua data diload dalam satu waktu.
ListView Builder adalah solusi untuk menampilkan data yang besar tanpa menurunkan performa apliksi. Dengan menggunakan ListView builder, aplikasi hanya perlu menampilkan data yang tampak dilayar saja, sisanya akan ditampilkan saat layar di scroll ke bawah atau ke atas. ListView builder sama dengan recycler view pada androidstudio.
Cara Menggunakan ListView Builder di Flutter
Cara menggunakan ListView builder sangatlah mudah. Kita tidak perlu menjalankan perintah looping seperti for atau while, cukup memasukan itemcount dan mereturn widget yang ingin diulang. Selain implementasi ListView builder kita juga akan belajar cara menggunakan list tile.1. Buatlah sebuah project flutter baru di visual studio code dengan menekan tombol ctrl + shift + P secara bersamaan. Lalu pilih Flutter: New Project → pilih folder(bebas) → dan beri nama project dengan list_view_builder.
2. buka file main.dart lalu ganti isinya dengan script yang ada di bawah ini. Untuk penjelasannya saya sertakan di dalam script dan di dalam tabel penjelas di bawah ini.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
//menghilangkan debug label
debugShowCheckedModeBanner: false,
home: Scaffold(
//membuat appbar dengan background putih dan membuat tulisan di tengah
appBar: AppBar(
backgroundColor: Colors.white,
title: Center(
child: Text(
"Apk Berita",
style: TextStyle(
color: Colors.black38
),
),
),
),
body: ListView.builder(
// itemcount adalah total panjang data yang ingin ditampilkan
itemCount: 20,
// itembuilder adalah bentuk widget yang akan ditampilkan, wajib menggunakan 2 parameter.
itemBuilder: (context, index){
//padding digunakan untuk memberikan jarak bagian atas listtile agar tidak terlalu mepet
//menggunakan edgeInsets.only untuk membuat jarak hanya pada bagian atas saja
return Padding(
padding: const EdgeInsets.only(
top: 20,
),
//listtile adalah widget yang disediakan flutter berisi 3 properti yang kita pakai
//properti: leading, title, dan subtitle. di dalam setiap properti kalian bebas melakukan customisasi
child: ListTile(
leading: Image.network(
"https://cdn.pixabay.com/photo/2018/02/24/23/05/architecture-3179435_960_720.jpg",
),
title: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
);
},
)
),
);
}
}3. Silahkan jalankan project kalian, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
 |
| Hasil Akhir |
Tabel Penjelas
| # | Syntax/Script | Keterangan |
| 1 | ListView.builder(…..); | Digunakan untuk membuat daftar atau list dengan jumlah data yang besar. |
| 2 | ItemCount: 20 | Panjang data yang ingin ditampilkan |
| 3 | ItemBuilder: (context, index){…..} | Digunakan untuk membuat custom widget yang akan dilooping. Kalian bisa membuat card, text dsb. |
| 4 | ListTile(…..) | ListTile adalah salah satu widget praktis yang dapat kita gunakan untuk membuat daftar dengan mudah. Berisi leading, title, dan subtitle sebagai attribute yang sering digunakan. Contoh penggunaan ListTile adalah untuk membuat daftar kontak, atau daftar berita. |
| 5 | Image.network(…..) | Widget praktis untuk menampilkan gambar dari internet. Cukup dengan mengisi url gambar saja untuk menampilkannya di aplikasi |
| 6 | maxLines | MaxLines adalah salah satu attribute text yang digunakan untuk membatasi jumlah baris |
| 7 | Overflow: TextOverflow.ellipsis | Digunakan untuk memotong text jika sudah melebihi jumlah baris yang telah ditentukan. |
Nah sekarang kalian sudah pahamkan gimana cara menggunakan ListView builder dan apa perbedaan ListView dan ListView builder. Tidak hanya itu, kaliann juga sudah belajar tentang widget list tile yang sangat membantu kalian untuk membuat list tanpa pusing mikirin layout.
Selanjutnya kalian bisa melakukan improvisasi dengan menambahkan data api pada ListView builder yang kalian buat. Bagaimana caranya? Ikuti tutorialnya di link berikut ini.
Selanjutnya kalian bisa melakukan improvisasi dengan menambahkan data api pada ListView builder yang kalian buat. Bagaimana caranya? Ikuti tutorialnya di link berikut ini.
Ok, sekian tutorial flutter dasar kali ini tentang cara menggunkan list view builder, semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tanyakan langsung di kolom komentar di bawah ini atau tanya langsung di fanspage tulisan saya. Sampai jumpa di tutorial flutter keren lainnya
Posting Komentar