O Flutter fornece uma ampla variedade de widgets para criar diferentes tipos de UIs. Hoje veremos como construir um GridView.gridview flutter nos fornece um widget chamado GridView, que é usado para criar uma grade rolável de widgets.

O tipo GridView no Flutter

O Flutter fornece três tipos de GridView, dependendo de como os itens da grade são dispostos:

GridView.count: esse tipo de GridView cria uma grade rolável com um número fixo de itens por linha ou coluna. Você pode especificar o número de itens do eixo horizontal (itens em linhas para rolagem vertical ou itens em colunas para rolagem horizontal) e personalizar sua proporção.
GridView.builder: esse tipo de GridView pode criar com eficiência uma grade rolável contendo um grande número de itens. Ele usa funções de construtor para criar e preencher itens de grade sob demanda enquanto o usuário rola, o que o torna adequado para exibir grandes quantidades de dados.
GridView.extent: Este tipo de GridView cria uma grade rolável onde os itens têm uma extensão fixa (largura ou altura) no eixo principal. Você pode especificar a extensão dos itens e personalizar sua proporção.

Fundamentos do GridView

Este widget GridView pega uma lista de widgets como seus filhos e os exibe em uma grade. O widget GridView possui várias propriedades que podem ser usadas para personalizar a aparência e o comportamento da grade. Algumas dessas propriedades são:

scrollDirection - Esta propriedade é usada para definir a direção da rolagem. Ele pode definir Axis.vertical para grades verticais e Axis.horizontal para grades horizontais.
gridDelegate - Esta propriedade é usada para definir o layout da grade. Leva um objeto -SliverGridDelegate como seu valor. O objeto SliverGridDelegate especifica o número de colunas e linhas na grade, o tamanho das células da grade e o espaçamento entre as células.
children - Esta propriedade é usada para definir a lista de widgets que serão exibidos na grade.
Implementando GridView em um aplicativo Flutter

No Flutter, temos 4 implementações de GridView, e veremos como usar cada uma delas para construir itens na grade
GridView.count
GridView.builder
GridView.custom
GrdiView.extent

Contagem de visualizações em grade:

Usando .count, podemos criar uma matriz 2D rolável de widgets com um número fixo de blocos no eixo horizontal. Ou seja, precisamos gerar a lista de widgets imediatamente. Abaixo está o código para gerar a grade usando o constructor.count.

.count Se tivermos um número limitado ou pequeno de itens para exibir na grade, podemos usar o construtor que gera a grade, é altamente recomendável usar o construtor .builder para construir a grade para um grande número de itens

crossAxisCount define o número de colunas que queremos ter na grade.

GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blue,
      margin: const EdgeInsets.all(10),
      child: Center(
        child: Text(
          'Item $index',
          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  },
)

Criador de visualização em grade:

Este construtor é adequado para exibições de grade com um grande número (ou infinito) de filhos, pois o construtor só é chamado para os filhos que estão realmente visíveis.

Fornecer um valor não nulo para itemCount melhora a capacidade do GridView de estimar o intervalo máximo de rolagem. ou seja, construir uma lista da internet, digamos que temos 20 itens e não fornecemos itemCount, quando rolarmos para baixo, o construtor também tentará criar o 21º item, o que resultará em um erro. Portanto, é recomendável fornecer itemCount

itemBuilder é um parâmetro obrigatório do construtor, .builder só funciona se o índice for maior ou igual a zero e menor que itemCount

gridDelegate para configurar com eficiência o layout da grade. Escolha um gridDelegate apropriado com base em seus requisitos, como SliverGridDelegateWithFixedCrossAxisCount ou SliverGridDelegateWithMaxCrossAxisExtent, e personalize suas propriedades para obter a configuração de grade desejada.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // number of items in each row
    mainAxisSpacing: 8.0, // spacing between rows
    crossAxisSpacing: 8.0, // spacing between columns
  ),
  padding: EdgeInsets.all(8.0), // padding around the grid
  itemCount: items.length, // total number of items
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue, // color of grid items
      child: Center(
        child: Text(
          items[index],
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  },
)

Faixa de exibição de grade:

GridView.extent é um GridView no Flutter que cria uma grade rolável com tamanhos de itens flexíveis. Ele usa o espaço disponível para determinar o tamanho dos itens, permitindo criar grades onde os itens podem ter tamanhos diferentes com base em seu conteúdo ou proporção. GridView.extent é especialmente útil quando você deseja criar grades responsivas que se adaptam a diferentes tamanhos de tela ou exibem itens de tamanhos diferentes.

GridView.extent(
  maxCrossAxisExtent: 200.0, // maximum item width
  mainAxisSpacing: 8.0, // spacing between rows
  crossAxisSpacing: 8.0, // spacing between columns
  padding: EdgeInsets.all(8.0), // padding around the grid
  children: items.map((item) {
    return Container(
      color: Colors.blue, // color of grid items
      child: Center(
        child: Text(
          item,
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  }).toList(),
)

GridView.extent permite a criação de grades responsivas com tamanhos de itens flexíveis. Especificando a propriedade maxCrossAxisExtent, você pode controlar a largura máxima dos itens na grade, e os itens serão redimensionados de acordo com o espaço disponível. Isso permite que você crie grades que se adaptam a diferentes tamanhos de tela ou exibem itens com diferentes dimensões, como imagens com diferentes proporções ou texto com diferentes comprimentos de conteúdo.

para concluir:

Gridview é um widget adaptável que fornece tipos diferentes, como GridView.builder e GridView.extent, para criar layouts de grade em seu aplicativo. Cada um tem seu caso de uso específico. GridView.builder é adequado para grandes conjuntos de dados ou conteúdo dinâmico onde você pode criar itens sob demanda, enquanto GridView.extent é útil para criar grades com tamanhos de itens flexíveis que se adaptam a diferentes tamanhos de tela ou exibir itens com diferentes tamanhos de conteúdo ou proporções .

Usando o GridView.builder, você pode construir grids com grande número de itens de forma eficiente, pois ele apenas cria e renderiza os itens que estão visíveis na tela, melhorando o desempenho e reduzindo o uso de memória. Ele também permite que você personalize o layout da grade e o processo de criação de itens, dando a você controle total sobre a aparência e a funcionalidade da grade.

GridView.extent, por outro lado, é ótimo para criar grades responsivas com tamanhos de itens flexíveis que se ajustam ao espaço disponível. Ao especificar a propriedade maxCrossAxisExtent, você pode controlar a largura máxima do item e o item será redimensionado de acordo. Isso torna GridView.extent adequado para exibir itens com diferentes proporções ou tamanhos de conteúdo, tornando-o visualmente atraente e responsivo a diferentes tamanhos de tela ou comprimentos de conteúdo.

Exibição em grade Tipo GridView no Flutter