Penggunaan GridView di Flutter

Jika anda pengguna Instagram tentu tidak asing dengan tampilan instagram feed. Bentuk tampilan kotak-kotak dan dapat di scroll seperti itulah yang dinamakan grid view. Pada flutter untuk membuat tampilan grid view dapat menggunakan GridView widget. Penggunaan GridView di Flutter seperti penggabungan antara penggunaan ListView widget serta penggunaan row dan column widget. Berikut contoh sederhana Penggunaan GridView di flutter framework

body: GridView.count(
  crossAxisCount: 3,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

Nilai tiga (3) pada crossAxisCount merupakan nilai untuk jumlah column pada grid. Sedangkan children merupakan widget turunan yang akan ditampilkan berjumlah lima logo Flutter dalam bentuk grid. Hasil code diatas akan menjadi seperti ini

contoh gridView pada flutter

GridView dasarnya merupakan CustomScrollView widget yang dapat di scroll (scrollable) sehingga tidak perlu khawatir apabila jumlah dari widget grid melebihi ukuran layar. Dalam GridView kita juga dapat menggunakan List.generate untuk membuat anakan widget sesuai dengan jumlah data array. Contohnya seperti ini

class BelajarGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: Text("belajarFlutter.com"),
          ),
          body: GridView.count(
            crossAxisCount: 3,
            children: List.generate(9, (index) {
              return Container(
                child: Card(
                  color: Colors.deepPurpleAccent,
                ),
              );
            }),
          )),
    );
  }
}
Penggunaan GridView di Flutter
contoh tampilan gridview
Terdapat Lima cara yang dapat digunakan dalam penggunaan GridView di Flutter yaitu :
  • GridView
  • GridView.count
  • GridView.builder
  • GridView.custom
  • GridView.extent

Sebenarnya dari segi penggunaan ke-lima fungsi tersebut juga sangat mirip. Sebagai contoh kita akan menampilkan 2 column grid dengan 4 widget yang berisi logo flutter menggunakan semua jenis GridView yang ada.

GridView.count
GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)
GridView.builder

Pada method builder, jumlah item grid yang akan ditampilkan mengikuti nilai dari properti itemCount

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (_, index) => FlutterLogo(),
  itemCount: 4,
)
GridView.custom
GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  childrenDelegate: SliverChildListDelegate(
    [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)
GridView.extent
GridView.extent(
  maxCrossAxisExtent: 400,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)
GridView

Kita juga dapat membuat GridView Tanpa method apapun, penggunaannya seperti gabungan antara GridView.count dengan builder. Dimana untuk menentukan jumlah column grid harus menggunakan delegate tetap untuk item grid menggunaan properti children

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

Dari ke lima contoh kode diatas hasilnya akan sama seperti gambar dibawah ini

contoh gridview dari 5 macam jenis fungsi

Silahkan gunakan methode mana saja yang paling cocok dengan style anda. Namun untuk proses pembelajaran tahap awal, disarankan gunakan GridView.count atau GridView.builder saja karena dua method tersebut paling populer digunakan dalam penggunaan GridView ini.

GridView.count umumnya digunakan untuk penggunaan jumlah grid yang tidak terlalu banyak. Apabila jumlah grid sekitar kurang dari 16, maka penggunaan gridView.count adalah pilihan yang tepat. Namun jika membuat grid dengan infinity scroll yang akan menampilkan banyak sekali item maka sebaiknya gunakan GridView.builder.

Properti Pada GridView

Seperti pada widget-widget lainnya, GridView juga memiliki properti yang dapat kita gunakan yaitu :

Key PropertiesDeskripsi
crossAxisCountBerfungsi untuk menentukan jumlah kolom
(hanya tersedia untuk GridView.count)
gridDelegateUntuk mendelegasikan grid item, biasanya digabungkan dengan penggunaan SliverGrid. Hanya tersedi di method costum dan builder
childAspectRatioMenentukan rasio dari grid item. Contoh childAspectRatio: 16 / 9
scrollDirectionMenentukan arah scroll. Secara default bernilai Axis.vertical
Dapat dirubah menjadi : Axis.horizontal
crossAxisSpacingMenentukan jarak spasi antar grid item secara sejajar dengan scrollDirection
mainAxisSpacingMenentukan jarak spasi antar grid item secara berlawanan dengan scrollDirection
reverseMembalik arah srollDirection. Bernilai Boolean dengan default value false
paddingMemberi jarak GridView dengan Widget lain yang bersinggungan

Apakah bisa menampilkan grid dalam grid ?

Tentu bisa. GridView merupakan salah satu multiple child widget sehingga tidak masalah jika memang membutuhkan grid di dalam gridview.

contoh multiple gridview widget

Source code untuk contoh gambar diatas dapat dilihat sebagai berikut :

import 'package:flutter/material.dart';

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

class BelajarGridView extends StatelessWidget {
  final List alphabet = [
    "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: Text("belajarFlutter.com"),
          ),
          body: GridView(
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
            children: <Widget>[
              GridView.count(
                crossAxisCount: 3,
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.all(20),
                children: List.generate(alphabet.length, (index) {
                  return Container(
                    height: 100,
                    child: Card(
                      child: Center(
                          child: Text(alphabet[index],
                              style: TextStyle(
                                  color: Colors.white, fontSize: 20))),
                      color: Colors.deepPurpleAccent,
                    ),
                  );
                }),
              ),
              FlutterLogo(),
              FlutterLogo(),
              FlutterLogo(),
              FlutterLogo(),
            ],
          )),
    );
  }
}

Dalam kasus rill tentu kita memerlukan kombinasi dengan jenis widget-widget lainnya. Jadi silahkan mencoba gridView. Semoga berhasil 🙂

Sumber Referensi :
https://api.flutter.dev/flutter/widgets/GridView-class.html

Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

Leave a Reply