Curso de FLUTTER e DART - 111 - ALIGN de Widget em Flutter - Curso de Flutter Grátis

Playlist: Curso Grátis de FLUTTER e DART Completo https://www.youtube.com/playlist?list=PL5EmR7zuTn_aX0pG4oWTyKKQT25Hkq2XG 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