Tutorial Flutter Membuat GridView

Tutorial Flutter Membuat GridView
Tutorial Flutter Membuat GridView
Codingtive.com - Flutter memiliki widget yang dinamakan GridView, nah apa sih fungsinya GridView ?
GridView digunakan untuk menampilkan data dalam bentuk grid, contohnya kalian ingin menampilkan data perbarisnya dibagi menjadi 4. Pada kesempatan ini, saya akan berbagi cara membuat GridView dengan menggunakan Flutter. Pastikan sebelumnya kalian sudah instal Flutter. Berikut langkah-langkah yang dapat kalian ikuti :

1. Buat project

Yang pertama kali dilakukan yaitu membuat project, kalian dapat menggunakan Android Studio maupun edittor yang lain. Projectnya saya beri nama latihan_gridview. Setelah projectnya selesai dibuat sekarang pastikan berjalan di emulator atau device.

2. Buka file main.dart

Langkah selanjutnya kita akan membuat tampilannya pada file main.dart yang berada pada folder lib. File main.dart sudah terisi otomatis ketika kalian pertama kali membuat project flutter, sekarang hapus semua isinya dan mulai menulis kodenya.

Setelah file main.dart kosong, sekarang tambahkan kode berikut :
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GridView',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text(
            'Flutter GridView',
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: _GridViewPage(),
      ),
    );
  }
}
Penjelasan kode diatas adalah kita membuat template layout menggunakan style Material yang berisi App Bar, dan body yang isinya diambil dari _GridViewPage() yang akan kita buat selanjutnya.

Selanjutnya kita akan membuat StatefulWidget diluar class MyApp untuk menampilkan GridView yang datanya diambil dari List. Buat class baru dan beri nama _GridViewPage dan class _GridViewPageState yang digunakan untuk menangani state dari halaman gridview.

Buat class _GridViewPage :
class _GridViewPage extends StatefulWidget {
  @override
  _GridViewPageState createState() => _GridViewPageState();
}
Kemudian tambahkan class _GridViewPageState dibawahnya, kodenya seperti berikut :

Penjelasan dari kode diatas :
  • Didalam class _GridViewPageState pertama kita membuat variable berupa List sebagai data yang akan ditampilkan pada GridView.
  • Pada bagian initState(), yang artinya ketika aplikasi dijalankan dan sebelum ditampilkan ada perulangan 1 sampai kurang dari 19 lalu ditambahkan pada variable itemList yang sudah dibuat.
  • Untuk membuat GridView kalian dapat menggunakan GridView.builder 
  • itemCount digunakan untuk jumlah data yang akan ditampilkan
  • gridDelegate digunakan untuk menentukan grid atau pembaginya
  • itemBuilder digunakan untuk membuat item yang akan ditampilkan pada GridView

Nah untuk kode lengkapnya seperti berikut :

Sekarang coba kalian run, maka hasilnya akan tampil seperti berikut :
Tutorial Flutter Membuat GridView
Tutorial Flutter Membuat GridView
Sekian tutorial cara membuat gridview dengan flutter, jika teman-teman ada pertanyaan bisa didiskusikan lewat kolom komentar. Ikuti terus codingtive untuk mendapatkan artikel dan tutorial menarik lainya. Terima kasih

Baca juga :

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Membuat GridView"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel