Flutter — Widgets
O fim e o inicio de uma série…
Este é o último da série (introdutória) sobre o Flutter e venho trazer a vida o conceito que faz Flutter ser o que é, e poder ser simples e divertido trabalhar. Iremos abordar neste artigo mais profundamente este tema e falar de alguns widgets importantes assim como formas de obter um resultado fantástico sem precisar de muito.
Eu não sou um desenvolvedor muito visual e me considero mais um backend, porém com o Flutter consigo trazer resultados muito acima do que seria sem o mesmo e consigo explorar a UX do produto de forma mais fácil mantendo também a lógica que tanto gosto!
A série conta com os seguintes artigos:
- Conhecendo o Flutter;
- Hey Flutter, Diz Olá Mundo e
- Flutter Widgets (este artigo).
Conhecendo widgets
Bom, no primeiro artigo da série defini o que são widgets e foi possível dar uma olhada em como elas nos ajudam para ter uma widget app aceitável e excelente em termos de visuais!
Como já vimos, widgets são todos elementos de nossa aplicações, o que para os Android developers usando Java e Kotlin chamam de View e View Groups.
As view groups em android possuem um ficheiro separado da lógica, o .XML que representa a tela que servirá de interação entre o usuário e a aplicação! É importante verificar se colocamos identificadores (ids) em nossas views pra garantir que são acessíveis a nível do código (lógica) da aplicação e tenhamos o resultado desejado ao premir um botão ou mover um scrollbar e assim por diante.
Com o Flutter existe apenas um ficheiro (.dart) pra gerir a lógica e a tela, representada por vários widgets. Um trecho de código, um único ficheiro ou pra quem gosta de partilhar seu código através de fotos uma única captura de ecrã! O facto de apenas precisar-se de um único ficheiro significa que não há de modo geral a necessidade de dar ids aos nossos widgets, pois o acesso é instantâneo, de facto não há nenhum acesso por parte de código apenas colocar de forma a respeitar a hierarquia e a aplicação está pronta para o deploy.
Widgets Tree
Se já viu algum curso de programação para iniciantes de certeza já ouviu falar de hierarquia de classes, bom aqui não é hierarquia de classes mas sim entre componentes, caso não tenha conhecimento sobre hierarquia de classes não é necessário para entender este conceito (…relaxe).
Os widgets em uma aplicação baseada em Flutter comportam-se de forma hierárquica, como destaquei antes é importante saber como dispor os nosso widgets para que não tenhamos erros ao correr a app (o famoso Runtime Exception) em nossa aplicação, ou seja, existe algum conjunto de regras a seguir quando for altura de usar um certo widget e isso vem ao detalhe quando olhamos para a documentação do widget desejado sobre as regras de aplicação e a quais widgets ele pode ‘herdar’.
A destacar neste trecho de código é o Container que na verdade apenas serve de ‘auxiliar’ para outros widgets que podem herdar características do mesmo.
O passeio da fama dos Widgets (Meu Top 5)
Existem vários widgets e seria necessário umas 1000 horas de leitura para falar de todos, portanto irei apontar alguns widgets básicos (e outros não básicos de acordo com o catálogo de widgets).
- Scaffold
Se queremos que a app corra e implemente componentes do Material design este é o widget de que precisamos e necessitamos! Carrega toda a estrutura de uma página.
2. Column e Row
O Column organiza vários widgets (childrens)em coluna e o Row em uma linha!
3. RaisedButton
Se a app é para nosso utilizador, de certeza ele vai ter que escolher alguma coisa ou uma outra acção do género, para este tipo de interação este é o widget! Ele pode receber um Widget (child).
4. Container
Considero o super-heroi dos widgets, pois permite aos widgets que não conseguem salvar-se a si mesmos a possibilidade ter propriedades como painting, padding, margin, tamanho e por ai em diante. Ele recebe um widget!
5. Icon
Uma das grandes vantagens de usar o Flutter e sua facilidade de integração com componentes de Material Design e o facto de poder personalizar cada widget e para isso temos o Icon que permite adicionar a outros componentes como botões (raisedbutton, floatingbutton,…) um toque personalizado a sua app ou marca que a app represente!
Grand Finale
Bom, este foi o terceiro e último artigo da série introdutória ao mundo das Widgets Apps!
Espero que se tenha divertido com os artigos e mais importante que tenha aprendido sobre o Flutter e suas fantásticas características que o tornam excepcional e divertido de se trabalhar com, tanto quanto a facilidade de atingir resultados excelentes com muito pouco investimento de linhas de código e tempo ao construir telas com ficheiros e implementação de várias classes para as views (Android), assim como o facto de poder desenvolver para duas plataformas com o mesmo código!
Este artigo marca também o início de uma nova serie…
Para entender mais sobre os Flutter Widgets dê uma olhada a este pequeno projecto e contribua com o que tiver aprendido!
Obrigado por acompanhar até ao fim e espero por você no próximo artigo.
Para questões e sugestões esteja a vontade para tal nos comentários, email igorlsambo1999@gmail.com ou twitter @lsambo02.
Obrigado e até a próxima série!!!
