Tutorial Cara Mudah Membuat Grid View dan Card di Flutter

Halo semuanya, kembali lagi di sahretech. 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

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.sahretech.com/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.

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.

    ⦿ Berpindah Halaman dengan Parameter di Flutter

    ⦿ Cara Membuat Custom Tab Bar di Flutter

    ⦿ Cara Menggunakan List View Builder

    ⦿ Cara Menggunakan List View Builder dan Get Data Api

    ⦿ Menggunakan TextField, Validasi dan Mengirim Data di Flutter

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 sahretech. Sekian dan sampai jumpa. 😊