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