Membuat GridView menggunakan Flutter

Halo guys, Berjumpa dengan Miniblog dari Inzaghi's Blog! Jika sebelumnya, sudah membuat Baris dan Kolom menggunakan Flutter, kali ini kita akan membuat Program GridView menggunakan Flutter.

Sumber : Blog.Logrocket.com, Scaler.com (Topics), dan juga menggunakan ChatGPT

Dalam Flutter, GridView adalah sebuah widget dalam kelas GridView dari pustaka Flutter. Flutter GridView adalah widget yang mirip dengan Array 2-D dalam bahasa pemrograman apa pun. Seperti namanya, Widget GridView digunakan ketika kita harus menampilkan sesuatu dalam bentuk Grid. Kita dapat menampilkan gambar, teks, ikon, dll., pada GridView. Dengan kata lain, item-item ditampilkan atau dirender dalam bentuk tabel. Berbeda dengan daftar normal, di mana item dirender hanya dalam satu arah, GridView merender item baik secara horizontal maupun vertikal. Gambar berikut menggambarkan perbedaan visual antara ListView dan GridView.

1. GridView Sederhana (Dengan Garis)

Inilah Program Flutter GridView Sederhana hanya menggunakan Garis saja :

import 'package:flutter/material.dart';
void main() {
  runApp(LatGridViewCount());
}
class LatGridViewCount extends StatelessWidget {
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: GridView.count(
          crossAxisCount: 3,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 20.0,
          shrinkWrap: true,
          children: [
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.red),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 1'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 2'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.orange),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 3'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 4'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 5'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 6'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 7'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 8'),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.blue),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              child: Text('Colom 9'),
            ),
          ],
        ),
      ),
    );
  }
}

Output :

2. GridView dengan Warna

Inilah Program Flutter GridView dengan Warna :

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Flutter GridView Example'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: GridView(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  mainAxisSpacing: 2,
                ),
                scrollDirection: Axis.vertical,
                children: [
                  Container(height: 10, width: 10, color: Colors.red),
                  Container(height: 10, width: 10, color: Colors.blue),
                  Container(height: 10, width: 10, color: Colors.red),
                  Container(height: 10, width: 10, color: Colors.blue),
                  Container(height: 10, width: 10, color: Colors.red),
                  Container(height: 10, width: 10, color: Colors.blue),
                  Container(height: 10, width: 10, color: Colors.red),
                  Container(height: 10, width: 10, color: Colors.blue),
                  Container(height: 10, width: 10, color: Colors.red),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output :

Untuk melihat Project ini di Web, silakan lihat di sini :

• https://zapp.run/edit/flutter-z4g062q4h06?entry=lib/main.dart&file=lib/main.dart:0-1472
  

Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)