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 construtorGridView.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 chamadocrossAxisCount esse atributo delimita quantas colunas teremos na grid, que no exemplo são duas.

Nochildren estamos passando oList.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 nossocontainer , 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 é ogridDelegate que é responsável pelo controle de nossa grid, nele podemos passar a instância doSliverGridDelegateWithFixedCrossAxisCount, que neste caso vamos fixar a nossa grade em 2 colunas passandocrossAxisCount:2.

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

Abaixo exemplo de um código de umGridView.builder recebendo itens daAPI 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 widgetDogItem 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: