Home Mobile Arti dari Gridview di Flutter?

Arti dari Gridview di Flutter?

0

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: