Por que eu devo ler este artigo:O layout organiza o que será visível para o usuário, influenciando a forma como ele vai interagir com o app. Por esse motivo essa é uma parte importante no desenvolvimento. Aqui vamos conhecer os diversos Widgets de layout do Flutter. O Flutter contém diversos Widgets para criar as interfaces visuais com as quais os usuários vão interagir. Neste artigo aprenderemos a organizar esses Widgets na tela utilizando os Widgets de layout.

Uma parte importante no desenvolvimento de um app é a criação de layouts, ou a forma em que os componentes visuais estarão dispostos na tela do dispositivo, pois eles podem ajudar ou dificultar a interação do usuário com o app.

No geral, o layout de uma tela é composto por Widgets visíveis, como barras de menu, painéis, imagens etc., e também por Widgets invisíveis, como linhas, colunas e grades. Esses Widgets invisíveis usamos para organizar a tela, alinhando os Widgets visíveis e delimitando o espaço que eles ocupam.

Por exemplo, na Figura 1 podemos ver o layout planejado para um app e ao lado a implementação dele em uma tela.

Planejamento de um layout e um app que utiliza esse layout
Figura 1. Planejamento de um layout e um app que utiliza esse layout

Repare na imagem a esquerda os nomes em cada parte do layout, como AppBar e Image. Esses são exemplos de Widgets visíveis do Flutter presentes na tela. Além deles, há também Widgets invisíveis, tais como Center e Row, que desempenham o papel de organizar a tela.

Widgets para organizar

Dentre os Widgets utilizados para organizar a tela os mais utilizados são Center, Column e Row. Eles funcionam como contêineres para outros Widgets filhos, que devem ser configurados utilizando as propriedades child, no caso de haver apenas um filho, ou children, para muitos filhos.

Center

Centraliza to ...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo