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:

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here