111 – ALIGN de Widget em Flutter – Curso de Flutter Grátis

Playlist: Curso Grátis de FLUTTER e DART Completo

Vamos ver align de widgets em flutter, como fazer o alinhamento de widgets em flutter.

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