Arti dari Gridview di Flutter?

Gridview berupa tampilan list tetapi berbentuk kotak-kotak, jika dalam sebuah list hanya bisa menampung satu item per row atau baris namun tidak pada list dalam bentuk GridView ini, ia dapat diatur jumlah column dalam suatu baris sesuai dengan yang kita inginkan.

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.

GridView pada 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.

            Terdapat Lima cara yang dapat digunakan dalam penggunaan GridView di Flutter yaitu:

  • GridView
  • GridView.count
  • GridView.builder
  • GridView.custom
  • GridView.extent

Berikut ini contoh code nya:

import 'package:flutter/material.dart';

void main() {
  runApp( new MaterialApp(home: new Application()));
}

class Application extends StatefulWidget{
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  List<int> itemgrid = new List();

  @override
  void initState(){
    for(int i=0; i<30; i++)
      itemgrid.add(i);
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new GridView.builder(itemCount: itemgrid.length, gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
          itemBuilder: (BuildContext context, int index){
            return new Card(
              color: Colors.blue,
              child: new Padding(padding: const EdgeInsets.all(25.0)),
            );
          }),
    );
  }
}

Hasil running:

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here