DEV Community

Victor Moreira
Victor Moreira

Posted on

Entendendo GridView com Flutter

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 Capa

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,
          ),
        );
      }),
    );
Enter fullscreen mode Exit fullscreen mode

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 Count Exemplo

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,
                         ),
                       ],);
}),
Enter fullscreen mode Exit fullscreen mode

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:

GridView builder Exemplo

Discussion (0)