Neste conteúdo vou mostrar um pouco sobre como utilizar os Widgets para construir layouts do zero no Flutter. Uma dica é que na própria documentação do Flutter você encontra vários tutoriais para diversos tipos de tecnologia que você já está acostumado, como Web, iOS, Android, entre outros.

Antes de mais nada, você já conferiu o meu conteúdo anterior, em que falo sobre por que você também deveria aprender Flutter? Resumi os maiores motivos para aprender Flutter e mostrei o porquê de ele ser uma ferramenta tão poderosa, já que é bem focado em UI (User Interface).

Agora, se você quiser focar na construção de um layout no Flutter, pode continuar a leitura aqui:

Entendendo a estrutura dos elementos no Flutter

Antes de adentrarmos aos Widgets, é bom entendermos como a estruturação dos elementos funciona no Flutter. Esta estrutura é bem parecida com a árvore de elementos do HTML.

Geralmente um Widget pode receber um Child ou Childrens, que por sua vez podem também receber um Child ou Childrens. E assim por diante, criando então uma hierarquia de elementos como na imagem abaixo:

Assim, temos quase como uma árvore de elementos (ou Widgets) e com isso o Flutter sabe onde e o que renderizar. Essa estrutura ajuda também na hora de redesenhar a árvore de elementos quando algo muda, redesenhando apenas a mudança.

Com isso conseguimos ter uma ideia de como se estruturam os Widgets. Mas antes precisamos entender o que são esses componentes, certo?

Conhecendo os Widgets

Os Widgets são componentes que carregam informações para o Flutter entender como desenhá-los na tela. Por isso, temos sempre um método build a ser implementado e, basicamente, todos os Widgets do Flutter precisam implementar esse método.

Existem dois tipos de Widgets: os Stateless e os Stateful. Cada um serve para um tipo de situação em que se precisa gerenciar o estado do Widget ou não — mas isso é assunto para um próximo post.

Containers

O primeiro Widget que é interessante conhecermos é o Container. Ele basicamente é um Widget multiuso, com o qual se pode definir tamanho, cor, borda, padding, margin e entre outras diversas características.

Eu, como venho de Web, gosto de pensar nele como uma div em HTML, um elemento cru que precisa ser estilizado.

No último exemplo podemos ver a utilização do Widget EdgeInsets, que basicamente diz ao padding onde e quanto de espaçamento é necessário.

Só com essas duas opções já podemos fazer muita coisa. Porém, ainda precisamos de mais opções para montar um layout ‘decente’, como por exemplo os Widgets Columns e Rows.

Columns e Rows

Esses dois Widgets servem para alinharmos os elementos dentro do nosso aplicativo. É importante não confundirmos com ListViews, que iremos abordar mais a frente.

Widgets Columns e Rows seguem o tamanho de seus Childrens, podendo ultrapassar o limite da tela. Caso isso ocorra, o Flutter dispara um erro avisando que o limite foi ultrapassado:

Columns e Rows são bem parecidos, porém com diferentes direções: Column na vertical e Row na horizontal (parecido com o grid system do bootstrap).

Eles também possuem alinhamentos famosos como Center, Space Between, Space Around e Space Evenly. Para quem conhece os alinhamentos do bootstrap vai se familiarizar:

Importante dizer que esses alinhamentos servem tanto para a Column quanto para o Row, o que facilita na hora de utilizar e lembrar dos nomes.

Eles também possuem dois tipos alinhamentos, o Main Axis Alignment e o Cross Axis Alignment.

O Main Axis Alignment serve para alinhar a principal função do Widget. No caso do Column alinhamento vertical e do Row alinhamento horizontal.

Já o Cross Axis Alignment serve para alinhar a função inversa do Widget. No caso do Column alinhamento horizontal e do Row alinhamento vertical

Com isso, já temos recursos para construir muitos layouts. Mas o que acontece quando você precisa mostrar uma lista de itens que ultrapassa sua tela? É pra isso que utilizamos o ListView, que vamos ver a seguir.

ListView

O Widget ListView serve para mostrarmos listas e podermos utilizar o poder do scroll.

Ele é bem parecido com o Column ou a Row, porém precisa ter um tamanho delimitado, já que esse Widget irá tentar expandir ao máximo na tela para delimitar o início e fim do scroll.

O Flutter automaticamente configura as ações de chegar ao topo ou ao final da lista de acordo com o aparelho. No exemplo logo abaixo teremos esse efeito de iOS:

Outra característica importante é que podemos utilizar a ListView na horizontal, fazendo um efeito parecido com um carousel:

Importante ressaltar que ele expande os Childrens de acordo com a direção, mesmo que você passe um Widget com tamanho fixo.

Column, ListView e Expanded

O último exemplo de Widget que eu gostaria de passar para vocês é o uso da ListView dentro de uma Column. Caso você tente utilizar assim, você irá se deparar com o seguinte erro:

Isso ocorre porque a ListView precisa de um limitador de tamanho e a Column permite ter um tamanho ilimitado, mesmo criando um erro ao ultrapassar o limite da tela.

Para conseguir uma ListView dentro de uma Column, precisamos de um Widget chamado Expanded, que expande ao máximo que puder e passa ele limite para seu Child fazendo o seguinte efeito:

Assim, podemos usar o tamanho restante da tela e passar um limitador para a ListView.

Agora você já pode montar um layout no Flutter!

O conhecimento destas funções já nos dá a ideia do que precisamos para montar um layout básico que todo aplicativo necessita. E no Flutter é muito simples montar este layout básico fazendo uso dos Widgets.

Falei aqui neste post de alguns deles, mas existem muitos outros Widgets dentro do repertório do Flutter. Por isso, recomendo que você teste o que vimos nesse post.

Crie um projeto e teste você mesmo todos os recursos e parâmetros dos Widgets.

Começamos a aprender! Agora, é só ficar ligado pois no próximo post vou falar sobre animações no Flutter e sobre como utilizá-las com poucas linhas de código, o que fará grande diferença no seu app.