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

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,
                ),
              );
            }),
          )),
    );
  }
}

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

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 Properties	Deskripsi
crossAxisCount	Berfungsi untuk menentukan jumlah kolom (hanya tersedia untuk GridView.count)
gridDelegate	Untuk mendelegasikan grid item, biasanya digabungkan dengan penggunaan SliverGrid. Hanya tersedi di method costum dan builder
childAspectRatio	Menentukan rasio dari grid item. Contoh childAspectRatio: 16 / 9
scrollDirection	Menentukan arah scroll. Secara default bernilai Axis.vertical Dapat dirubah menjadi : Axis.horizontal
crossAxisSpacing	Menentukan jarak spasi antar grid item secara sejajar dengan scrollDirection
mainAxisSpacing	Menentukan jarak spasi antar grid item secara berlawanan dengan scrollDirection
reverse	Membalik arah srollDirection. Bernilai Boolean dengan default value false
padding	Memberi 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.

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