ListView VS GridView
Di dalam pengembangan aplikasi berbasis android, ada dua istilah yang sering digunakan dalam membuat list. Yaitu ListView dan GridView, keduanya sama-sama digunakan untuk membuat list atau daftar data dan memungkinkan untuk layar discroll kebawah atau keatas. Terdapat perbedaan diantara keduanya.ListView: Widget ini digunakan untuk membuat daftar dengan satu widget tree di setiap barisnya. Di dalam widget tree kita bisa melakukan kustomisasi widget sesuai dengan selera. Widget ini bisa kita temukan di aplikasi chating, seperti whatsapp. Di dalam halaman chats, terdapat daftar yang menampilkan semua chat dengan berbagai kontak.
GridView: Widget ini digunakan untuk membuat daftar dengan satu atau lebih widget tree di setiap barisnya, jumlah widget yang ditampilkan dapat diatur sesuai dengan kebutuhan. Di dalam widget tree kita bisa melakukan kustomisasi widget sesuai dengan selera. Widget ini biasa kita temukan di aplikasi e-commerce, yaitu tampilan list produk.
Untuk membuat pemahaman kita semakin jelas, berikut ini saya tampilkan contoh penggunaan ListView dan GridView yang ada di dalam aplikasi android.
 |
| Perbedaan ListView dan GridView |
Cara Membuat Grid View di Flutter
Cara membuat GridView di flutter cukup mudah, caranya juga hampir sama dengan cara membuat ListView pada aritkel yang saya bahasi di link ini. https://www.fromsunda.eu.org/2022/02/cara-menggunakan-list-view-builder-di.html. Di artikel kali ini juga kita akan coba menggunakan data list dummy dengan custom widget di setiap gridnya. Ok langsung saja!.1. Buatlah sebuah project flutter baru. Buka visual studio code → tekan ctrl + shift + P → flutter new project → pilih folder(bebas) → kasih nama project "latihan_grid_view".
2. Buka file main.dart. Lalu hapus isinya dan ganti dengan script yang ada di bawah ini. Untuk penjelasan sudah saya sertakan di script dan tabel penjelas. Tapi jika ada yang kurang dimengerti, silahkan tanya langsung di kolom komentar.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: 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 Scaffold(
appBar: AppBar(
title: Center(
child: Text("Latihan Grid View"),
),
),
body: GridView.count(
//widget yang akan ditampilkan dalam 1 baris adalah 2
crossAxisCount: 2,
children: [
//card ditampilkan disini
//saya membuat custom card di bawah agar kodingan tidak terlalu panjang
CustomCard(title: "Judul Card Kedua", image: "https://cdn.pixabay.com/photo/2018/02/01/14/09/yellow-3123271_960_720.jpg"),
CustomCard(title: "Judul Card Ketiga", image: "https://cdn.pixabay.com/photo/2016/08/27/14/38/mountains-1624284__340.jpg"),
CustomCard(title: "Judul Card Keempat", image: "https://cdn.pixabay.com/photo/2016/11/29/02/23/cliffs-1866832__340.jpg"),
CustomCard(title: "Judul Card Kelima", image: "https://cdn.pixabay.com/photo/2016/09/18/23/23/sugarloaf-mountain-1679285__340.jpg"),
],
),
);
}
}
//membuat customcard yang bisa kita panggil setiap kali dibutuhkan
class CustomCard extends StatelessWidget {
//ini adalah konstruktor, saat class dipanggil parameter konstruktor wajib diisi
//parameter ini akan mengisi title dan gambar pada setiap card
CustomCard({required this.title, required this.image});
String title;
String image;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 10),
child: Card(
//menambahkan bayangan
elevation: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
image,
),
fit: BoxFit.cover
)
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Text(title),
)
],
),
),
);
}
} Tabel Penjelas
| # | Syntax/Script | Keterangan |
| 1 | crossAxisCount: 2 | Mengatur jumlah widget/card yang akan ditampilkan dalam satu baris |
| 2 | CustomCard(title: ..., image: … ), | Saya membuat class CustomCard sebagai template untuk semua card yang digunakan di dalam tampilan grid. Setiap kali class ini dipanggil, wajib mengisi title dan image dalam string |
| 3 | CustomCard({required this.title, required this.image}); | constructor |
| 4 | elevation: 5, | Menambahkan bayangan pada widget card |
| 5 | decoration: BoxDecoration( image: DecorationImage( image: NetworkImage(image,), fit: BoxFit.cover ) ), | Untuk menambahkan gambar pada container, kita dapat memberikan properti seperti ini. Sedangkan fit: BoxFit.cover adalah printah untuk membuat gambar menyesuaikan dengan ukuran container, sehingga gambar tidak terlalu gepeng |
 |
| Hasil Akhir |
Wah kalian keren!, sekarang kalian sudah bisa membuat tampilan gridview di aplikasi android. Sangat mudah dan menyenangkan. Ok saya juga sudah menulis beberapa tutorial terkait flutter yang bisa kalian pelajari.
Ok, sekian tutorial kali ini tentang cara mudah membuat GridView di flutter. Semoga bermanfaat. Jika ada kesulitan, silahkan tanya langsung di kolom komentar atau tanya di fanspage tulisan saya. Sekian dan sampai jumpa. 😊
Posting Komentar