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.

Contoh pengaplikasian gridview :

Langkah pertama tambahkan direktory images, kemudian tambahkah file foto didalamnya.

pubsec.yaml :

 assets:

     – images/fizi.jpg

     – images/ipin.jpg

     – images/jarjit.jpg

     – images/mail.jpg

     – images/memei.jpg

     – images/jj.jpg

     – images/upin.jpg

main.dart :

import 'package:flutter/material.dart';
void main(){
  runApp(new MaterialApp(
    title: "Custom Grid View",
    home: new CustomGridView(),
  ));
}

class CustomGridView extends StatefulWidget{
  @override
  _GridViewState createState()=>new _GridViewState();
}

class _GridViewState extends State<CustomGridView>{
  List<Container>daftarUpinipin=new List();
  var upinIpin = [
    {"nama":"Fizi","gambar":"fizi.jpg"},
    {"nama":"Ipin","gambar":"ipin.jpg"},
    {"nama":"Jarjit","gambar":"jarjit.jpg"},
    {"nama":"Mail","gambar":"mail.jpg"},
    {"nama":"Memei","gambar":"memei.jpg"},
    {"nama":"Upin dan Ipin","gambar":"jj.jpg"},
    {"nama":"Upin","gambar":"upin.jpg"},
  ];

  _buatDataList() async{
    for (var i=0;i<upinIpin.length;i++){
      final anggota = upinIpin[i];
      final String gambar = anggota["gambar"];

      daftarUpinipin.add(new Container(
        padding: new EdgeInsets.all(10.0),
        child: new Card(
          child: new InkWell(
            onTap: (){
              Navigator.of(context).push(new MaterialPageRoute(builder: (context) => DetailGridView(
                nama:anggota['nama'],
                gambar:gambar,
              )));
            },

            child: new Column(
              children: <Widget>[new Hero(
                tag: anggota['nama'],
                child: new Image.asset(
                  "images/$gambar",
                  height: 100.0,
                  width: 100.0,
                  fit: BoxFit.cover
                ),
              ),

                new Padding(padding: new EdgeInsets.all(20.0),),
                new Text(
                  anggota['nama'],
                  style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
                )
              ],
            ),
          )
        ),
      ));
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    _buatDataList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Grid View'),
        backgroundColor: Colors.blue,
      ),
      
      body: new GridView.count(crossAxisCount: 2,
      children: daftarUpinipin,
      ),
    );
}

}

class DetailGridView extends StatelessWidget{
  DetailGridView({this.nama,this.gambar});
  final String nama;
  final String gambar;
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: ListView(
        children: <Widget>[
          new Container(
            height: 240.0,
            child: new Hero(tag: nama, 
                child: new Material(
                  child: new InkWell(
                    child: new Image.asset("images/$gambar",
                    fit: BoxFit.contain,
                    ),
                  ),
                )),
          ),
          
          new BagianNama(
            nama:nama,
          ),
          
          new BagianIcon(),
          new BagianKeterangan(),
          
        ],
      ),
    );
  }
  
}

class BagianNama extends StatelessWidget{
  BagianNama({this.nama});
  final String nama;
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      padding: EdgeInsets.all(10.0),
      child: new Row(
        children: <Widget>[
          new Expanded(child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Text(
                nama, style: new TextStyle(fontSize: 20.0, color: Colors.amber),
              ),
              new Text("$nama\@gmail.com", style: new TextStyle(fontSize: 17.0, color: Colors.grey),)
            ],
          ),),
          new Row(
            children: <Widget>[new Icon(Icons.star, size: 30.0, color: Colors.red,),
            new Text("12", style: new TextStyle(fontSize: 18.0),)
            ],
          )
        ],
      ),
    );
  }
  
}
class BagianIcon extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10.0),
      child: new Row(
        children: <Widget>[
          new IconTeks(
            iconData: Icons.call,
            teks : "Call",
          ),
          
          new IconTeks(
            iconData:Icons.message,
            teks:"Message",
          ),
          new IconTeks(
            iconData: Icons.photo,
            teks:"Photo",
          )
        ],
      ),
    );
  }
}

class IconTeks extends StatelessWidget{
  IconTeks({this.iconData, this.teks});
  final IconData iconData;
  final String teks;
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Expanded(child: new Column(
      children: <Widget>[
        new Icon(iconData, size: 20.0, color: Colors.blue,),
        new Text(teks, style: new TextStyle(fontSize: 12.0, color: Colors.blue),)
      ],
    )
    );
  }
}

class BagianKeterangan extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10.0),
      child: new Card(
        child: new Padding(padding: const EdgeInsets.all(10.0),
        child: new Text("Upin & Ipin adalah serial televisi animasi anak-anak yang dirilis pada tanggal 14 September 2007 yang ditayangkan di Malaysia dan Indonesia yaitu TV9 dan MNCTV. Serial ini yang diproduksi oleh Les' Copaque Production. Awalnya film ini bertujuan untuk mendidik anak-anak biar lebih mengerti tentang Ramadan sebelum film Upin & Ipin Geng",
        style: new TextStyle(fontSize: 14.0),
        textAlign: TextAlign.justify,
        ),
        ),
      ),
    );
  }
}