100 – LAYOUTS EM FLUTTER – Curso de Flutter & Dart Grátis

Playlist: Curso Grátis de FLUTTER e DART Completo

Vamos falar sobre Layouts em Flutter.

Qual é o ponto?
Widgets são classes usadas para construir interfaces de usuário.
Os widgets são usados ​​para elementos de layout e de interface do usuário.
Compor widgets simples para construir widgets complexos.
O núcleo do mecanismo de layout do Flutter são os widgets. Em Flutter, quase tudo é um widget – até mesmo modelos de layout são widgets. As imagens, os ícones e o texto que você vê em um aplicativo Flutter são todos widgets. Mas as coisas que você não vê também são widgets, como as linhas, colunas e grades que organizam, restringem e alinham os widgets visíveis.

Você cria um layout compondo widgets para criar widgets mais complexos. Por exemplo, a primeira captura de tela abaixo mostra três ícones com um rótulo abaixo de cada um:

Layout de amostra Layout de amostra com depuração visual
A segunda captura de tela exibe o layout visual, mostrando uma linha de três colunas em que cada coluna contém um ícone e um rótulo.

 Nota: A maioria das capturas de tela neste tutorial é exibida com debugPaintSizeEnabled definido como true para que você possa ver o layout visual. Para obter mais informações, consulte Depuração Visual, uma seção em Depuração de Aplicativos Flutuantes.

Veja um diagrama da árvore de widgets para esta interface do usuário:

Node Tree

A maior parte disso deve ter a aparência esperada, mas você pode estar se perguntando sobre os contêineres (mostrados em rosa). Container é uma classe de widget que permite personalizar seu widget filho. Use um Contêiner quando quiser adicionar preenchimento, margens, bordas ou cor de fundo para nomear alguns de seus recursos.

Neste exemplo, cada widget de texto é colocado em um contêiner para adicionar margens. A linha inteira também é colocada em um contêiner para adicionar preenchimento ao redor da linha.

O restante da interface do usuário neste exemplo é controlado por propriedades. Defina a cor de um ícone usando sua propriedade color. Use a propriedade Text.style para definir a fonte, sua cor, peso e assim por diante. Colunas e linhas têm propriedades que permitem especificar como seus filhos são alinhados verticalmente ou horizontalmente e quanto espaço os filhos devem ocupar.