Tutorial Cara Mudah Membuat Grid View dan Card di Flutter
Halo semuanya, kembali lagi di tulisan saya. Pada kesempatan kali ini kita akan belajar bagaimana cara membuat tampilan grid view di flutter dengan cara yang mudah dan simpel. Penasaran?, ayo ikuti tutorialnya di bawah ini.




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
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

3.
Setelah semua step sudah kita kerjakan, saatnya kita lakukan uji coba. Silahkan jalankan project kalian masing-masing. JIka bernar, maka tampilannya akan tampak seperti ini.

cara membuat grid view flutter
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. 😊

Post a Comment

Lebih baru Lebih lama