Main e Cross Axis Alignment em Flutter

Gabriel Brito
2 min readAug 6, 2023

--

Como usar corretamente o MainAxisAlignment e o CrossAxisAlignment durante o desenvolvimento Flutter?

Bom, é mais fácil do que você pensa, vamos começar com o MainAxisAlignment. Como o próprio nome diz, é o Alinhamento do Eixo Principal do componente que você está estilizando, ou seja, caso você esteja dentro de uma Row, o eixo principal dela é na horizontal

Caso esteja em uma coluna, o eixo principal é na vertical:

Certo, então ao pensar no CrossAxisAlignment, Eixo de Alinhamento CRUZADO, isso significa que estaremos pensando no eixo perpendicular ao nosso eixo principal, no caso de uma Row, seria o eixo Y, e no caso de uma coluna, seria o eixo X.

Cada Enum desses possui diferentes valores que interferem na organização dos itens em tela, segue uma imagem com o que cada um deles faz:

Por fim, é isso que eu tinha pra falar hoje, um tutorial rápido porém muito importante!

--

--

Gabriel Brito
Gabriel Brito

Written by Gabriel Brito

Software Developer | Mobile | Android | React Native | Backend | Spring | Kotlin | Java | Javascript

No responses yet