102 – Layouts Múltiplos com ROW e COLUMN em FLUTTER – Aprender Flutter em Português

Playlist: Curso Grátis de FLUTTER e DART Completo

Coloque vários widgets na vertical e na horizontal
Um dos padrões de layout mais comuns é organizar os widgets vertical ou horizontalmente. Você pode usar um widget de Linha para organizar widgets horizontalmente e um widget de Coluna para organizar widgets verticalmente.

Qual é o ponto?
Linha e coluna são dois dos padrões de layout mais usados.
Linha e coluna cada um tem uma lista de widgets filhos.
Um widget filho pode ser um widget de linha, coluna ou outro complexo.
Você pode especificar como uma linha ou coluna alinha seus filhos, tanto vertical como horizontalmente.
Você pode estender ou restringir widgets filhos específicos.
Você pode especificar como os widgets filhos usam o espaço disponível da linha ou da coluna.
Para criar uma linha ou coluna no Flutter, você adiciona uma lista de widgets filhos a um widget de Linha ou Coluna. Por sua vez, cada criança pode ser uma linha ou coluna e assim por diante. O exemplo a seguir mostra como é possível aninhar linhas ou colunas dentro de linhas ou colunas.

Esse layout é organizado como uma linha. A linha contém dois filhos: uma coluna à esquerda e uma imagem à direita:

Captura de tela com textos explicativos mostrando a linha que contém dois filhos

A árvore de widgets da coluna à esquerda aninha linhas e colunas.

Diagrama mostrando uma coluna da esquerda dividida em suas sub-linhas e subcolunas

Você implementará alguns dos códigos de layout da Pavlova em Linhas e colunas de aninhamento.

 Nota: Row e Column são widgets primitivos básicos para layouts horizontais e verticais – esses widgets de baixo nível permitem personalização máxima. O Flutter também oferece widgets especializados de alto nível que podem ser suficientes para suas necessidades. Por exemplo, em vez de Row, você pode preferir o ListTile, um widget fácil de usar com propriedades para ícones iniciais e finais e até três linhas de texto. Em vez de Coluna, você pode preferir ListView, um layout de coluna que rola automaticamente se o conteúdo for muito longo para caber no espaço disponível. Para mais informações, consulte Widgets de layout comuns.

Alinhando Widgets
Você controla como uma linha ou coluna alinha seus filhos usando as propriedades mainAxisAlignment e crossAxisAlignment. Para uma linha, o eixo principal é executado horizontalmente e o eixo transversal é executado verticalmente. Para uma coluna, o eixo principal é executado verticalmente e o eixo transversal é executado horizontalmente.

Diagrama mostrando o eixo principal e o eixo cruzado para uma linha Diagrama mostrando o eixo principal e o eixo cruzado para uma coluna
As classes MainAxisAlignment e CrossAxisAlignment oferecem uma variedade de constantes para controlar o alinhamento.

 Nota: Ao adicionar imagens ao seu projeto, você precisa atualizar o arquivo pubspec para acessá-las. Esse exemplo usa Image.asset para exibir as imagens. Para mais informações, consulte o arquivo pubspec.yaml deste exemplo ou Adicionar recursos e imagens no Flutter. Você não precisa fazer isso se estiver fazendo referência a imagens on-line usando o Image.network.

No exemplo a seguir, cada uma das três imagens tem 100 pixels de largura. A caixa de renderização (neste caso, a tela inteira) tem mais de 300 pixels de largura, portanto, configurar o alinhamento do eixo principal para o espaço Divide uniformemente o espaço horizontal livre entre, antes e depois de cada imagem.

content_copy
Linha(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crianças: [
    Image.asset (‘images / pic1.jpg’),
    Image.asset (‘images / pic2.jpg’),
    Image.asset (‘images / pic3.jpg’),
  ]
);
Linha com 3 imagens uniformemente espaçadas

Fonte do aplicativo: row_column

As colunas funcionam da mesma maneira que as linhas. O exemplo a seguir mostra uma coluna de 3 imagens, cada uma com 100 pixels de altura. A altura da caixa de renderização (neste caso, a tela inteira) é de mais de 300 pixels, portanto, definir o alinhamento do eixo principal como espaço Divide normalmente o espaço vertical livre igualmente entre, acima e abaixo de cada imagem.

content_copy
Coluna(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crianças: [
    Image.asset (‘images / pic1.jpg’),
    Image.asset (‘images / pic2.jpg’),
    Image.asset (‘images / pic3.jpg’),
  ]
);
Fonte do aplicativo: row_column

Coluna mostrando 3 imagens espaçadas uniformemente
Tamanhos de widgets
Quando um layout é muito grande para caber em um dispositivo, um padrão listrado amarelo e preto aparece ao longo da borda afetada. Aqui está um exemplo de uma linha muito ampla:

Fileira excessivamente larga

Os widgets podem ser dimensionados para caber em uma linha ou coluna usando o widget Expandido. Para corrigir o exemplo anterior, em que a linha de imagens é muito ampla para sua caixa de renderização, envolva cada imagem com um widget Expandido.