Flutter GridView é um widget semelhante a um array 2-D em qualquer linguagem de programação. Como o nome sugere, um GridView Widget é usado quando temos que exibir algo em um Grid. Podemos exibir imagens, texto, ícones, etc. no GridView. Podemos implementar GridView de várias maneiras no Flutter:

  • GridView.count()
  • GridView.builder()
  • GridView.custom()
  • GridView.extent()

Construtor de GridView:

GridView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
Clip clipBehavior: Clip.hardEdge,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId}
)

Construtor de GridView.builder:

GridView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Construtor de GridView.count:

GridView.count(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required int crossAxisCount,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Construtor de GridView.custom:

const GridView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Construtor de GridView.extent:

GridView.extent(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required double maxCrossAxisExtent,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Propriedades de GridView:

  • âncora: esta propriedade assume um valor duplo como o objeto para controlar o efeito de rolagem zero.
  • childrenDelegate: sliverChildDelegate é o objeto desta propriedade. Ele fornece um delegado que atende aos filhos do GridView.
  • clipBehaviour: esta propriedade usa Clip enum como o objeto para decidir se o conteúdo em GridView será cortado ou não.
  • controlador: Esta propriedade contém a classe ScrollController como o objeto para controlar a posição da visualização de rolagem.
  • dragStartBehaviour: esta propriedade leva DragStartBehavior enum como o objeto. Ele controla a forma como o comportamento de arrastar funciona.
  • gridDelegate: a classe SliverGridDelegate é o objeto desta propriedade. É responsável pelo delegado que lida com o layout do widget filho no GridView .

GridView.count() é usado com frequência e quando já sabemos o tamanho das grades. Sempre que temos que implementar GridView dinamicamente, usamos GridView.builder(). Ambos são como um array normal e um array dinâmico. No Flutter, os dois GridView são mais usados.

GridView.count() é usado com alguns parâmetros nomeados. As propriedades que podemos usar com GridView.count() são: 

  • crossAxisCount: Define o número de colunas em GridView.
  • crossAxisSpacing: define o número de pixels entre cada filho listado ao longo do eixo cruzado.
  • mainAxisSpacing: define o número de pixels entre cada filho listado ao longo do eixo principal.
  • padding (EdgeInsetsGeometry): define a quantidade de espaço para envolver toda a lista de widgets.
  • primário: se verdadeiro, seu 'Scroll Controller' é obtido implicitamente pelo framework.
  • scrollDirection: define a direção em que os itens em GridView irão se mover, por padrão é vertical.
  • reverter: se for definido como verdadeiro, ele simplesmente inverte a lista de widgets na direção oposta ao longo do eixo principal.
  • física: determina como a lista de widgets se comporta quando o usuário chega ao final ou ao início do widget durante a rolagem.
  • shrinkWrap: Por padrão, seus valores são falsos, então a lista rolável ocupa tanto quanto espaço para rolar na direção de rolagem, o que não é bom porque ocupa memória que é desperdício de memória e o desempenho do aplicativo reduz e pode dar algum erro, para evitar vazamento de memória durante a rolagem, encapsulamos nossos widgets filhos usando shrinkWrap definindo shrinkWrap como true e a lista rolável será tão grande quanto seus widgets filhos permitirem.
import 'package:flutter/material.dart';
 
void main() {
  runApp(GeeksForGeeks());
}
 
class GeeksForGeeks extends StatelessWidget {
 
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[900],
          title: Center(
            child: Text(
              'Flutter GridView Demo',
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 30.0,
              ),
            ),
          ),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          shrinkWrap: true,
          children: List.generate(20, (index) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('img.png'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius:
                    BorderRadius.all(Radius.circular(20.0),),
                  ),
                ),
              );
            },),
        ),
      ),
    );
  }
}

Saída:

Demonstração do Flutter GridView