Entendendo GridView com Flutter

Victor Moreira — Wed, 15 Sep 2021 23:08:51 +0000

Imagine que você precise criar uma tela de exibição de items como fotos ou cards de comidas como os apps de delivery, pois então com certeza o GridView irá lher ajudar e muito na construção.

GridView.count

A maneira mais simples de implementarmos o GridView é através do construtor GridView.count(). Com ele é possível já termos uma exibição de grid, como o código de exemplo abaixo:

GridView.count(
      crossAxisCount: 2,
      children: List.generate(10, (index) {
        return Container(
          child: Card(
            color: Colors.grey,
          ),
        );
      }),
    );

Neste exemplo vemos a presença de um atributo chamado crossAxisCount esse atributo delimita quantas colunas teremos na grid, que no exemplo são duas.

No children estamos passando o List.generate este o qual sua função é replicar as grades que estão sendo demonstradas, neste exemplo colocamos 10 grades, que irão apresentar o nosso container , conforme exemplo ilustrado abaixo:

GridView.builder

O GridView.builder é utilizado para requisições de itens em API, no qual não se temos ao certo o número exato de retorno. Através dele podemos ter uma melhor performance em nossas aplicações, pois ele vai trabalhar sob demanda.

Um dos atributos do builder é o gridDelegate que é responsável pelo controle de nossa grid, nele podemos passar a instância do SliverGridDelegateWithFixedCrossAxisCount, que neste caso vamos fixar a nossa grade em 2 colunas passando crossAxisCount:2.

Os outros dois atributos do nosso builder que são importantes é o itemCount que vamos passar a quantidade de itens que nossa requisição a API trouxe, e o itemBuilder que é onde vamos passar os itens para serem apresentados em widget.

Abaixo exemplo de um código de um GridView.builder recebendo itens da API Dog.

GridView.builder(
  padding: EdgeInsets.all(12),
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
               crossAxisCount: 2),
               itemCount:_dogAPIStore.dogAPI.message.length,
               itemBuilder: (context, index) {
                   return Column(
                      children: [
                        DogItem(
                         imageDog:_dogAPIStore.dogAPI.message[index]
                                  .toString(),
                           heigth: 0.2,
                           width: 0.4,
                         ),
                       ],);
}),

O widget DogItem será o que representará cada item vindo da API, nele criamos um atributo para receber a imagem, e os outros dois atributos para setar a altura e largura.

Exemplo em execução:

DEV Community: Victor Moreira

Entendendo GridView com Flutter

GridView.count

GridView.builder