Скачать или смотреть 105 - GridView em Flutter - Curso de Programação em Flutter e Dart

Playlist: Curso Grátis de FLUTTER e DART Completo
   • Curso de FLUTTER e DART  

GridView
Use o GridView para lançar widgets como uma lista bidimensional. O GridView fornece duas listas pré-fabricadas ou você pode criar sua própria grade personalizada. Quando um GridView detecta que seu conteúdo é muito longo para caber na caixa de renderização, ele rola automaticamente.

Resumo (GridView)
Estabelece widgets em uma grade
Detecta quando o conteúdo da coluna excede a caixa de renderização e fornece automaticamente rolagem
Crie sua própria grade personalizada ou use uma das grades fornecidas:
GridView.count permite que você especifique o número de colunas
GridView.extent permite que você especifique a largura máxima de pixels de um bloco
 Observação: ao exibir uma lista bidimensional em que é importante qual linha e coluna uma célula ocupa (por exemplo, é a entrada na coluna "caloria" da linha "abacate"), use Tabela ou DataTable.

Exemplos (GridView)
Uma grade de 3 colunas de fotos

Usa GridView.extent para criar uma grade com blocos de até 150 pixels de largura.

Fonte do aplicativo: grid_and_list

Uma grade de 2 colunas com rodapés

Usa GridView.count para criar uma grade com 2 blocos de largura no modo retrato e 3 blocos de largura no modo paisagem. Os títulos são criados definindo a propriedade footer para cada GridTile.

Código de dardos: grid_list_demo.dart da galeria Flutter

content_copy
Widget _buildGrid () =MAIOR GridView.extent (
    maxCrossAxisExtent: 150,
    preenchimento: const EdgeInsets.all (4),
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    children: _buildGridTileList (30));

// As imagens são salvas com os nomes pic0.jpg, pic1.jpg ... pic29.jpg.
// O construtor List.generate () permite uma maneira fácil de criar
// uma lista quando os objetos possuem um padrão de nomenclatura previsível.
Listar MENORContainerMAIOR _buildGridTileList (int count) =MAIOR List.generate (
    Contar, (i) =MAIOR Container (child: Image.asset ('images / pic $ i.jpg')));