Card image cap
[Flutter][14] Membuat Grid View
Monday, 04 Mar 2019

Hello world,

Hari ini mau bahas tentang GridView. Beda tipis dengan pembahasan sebelumnya yaitu tentang ListView dengan fungsi yang hampir sama tapi tampilan yang berbeda. Yang sebelumnya List, kalau yang ini Grid. Cara penggunaannya juga hampir sama kodenya. Langsung saja saya kasih contoh.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
child: GridView.count(
crossAxisCount: 2,
children: <Widget>[
Container(
child: Text("1"),
),
Container(
child: Text("2"),
),
Container(
child: Text("3"),
),
Container(
child: Text("4"),
),
Container(
child: Text("5"),
),
Container(
child: Text("6"),
)
],
),
),
);
}
}

Dari contoh di atas saya coba jabarkan sedikit. Kalau kita coba jalankan aplikasinya maka akan menampilkan angka 1 sampai 6 menyamping ke kanan dan setiap kelipatan 2 akan turun ke bawah. Kenapa begitu? Ini karena bentuknya Grid. Kalau kita lihat ada kode crossAxisCount yang bernilai 2. Penggunaannya di sini adalah jumlah grid (menyamping) yang ingin dibuat. Lalu ada Children yang berisi item-itemnya. Sederhana. Mari kita lanjutkan. Saya akan coba buat beberapa variasi pada contoh ini.

            Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("1", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),

Di sini saya mengubah Container pada grid pertama seperti menambahkan margin, alignment, background, dan fontsyle. Kita bisa mengganti isi dari child pada Container dengan Icon atau gambar sesuai keinginan. 

Keseluruhan kodenya akan menjadi seperti ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
child: GridView.count(
crossAxisCount: 2,
children: <Widget>[
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("1", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("2", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("3", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("4", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("5", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("6", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("7", style: TextStyle(color: Colors.white, fontSize: 30.0),),
),
Container(
margin: EdgeInsets.all(20.0),
alignment: Alignment.center,
color: Colors.blue,
child: Text("8", style: TextStyle(color: Colors.white, fontSize: 30.0),),
)
],
),
),
);
}
}

Selamat mencoba :)