Flutter - Construindo uma linda aplicação de notícias - Parte 1
Flutter é um Framework OpenSource mobile para desenvolvimento de aplicações Android e IOS de alta performance. Anunciado no Google I/O de 2017, vem causando um grande entusiasmo na forma de desenvolver bons APPs para ambas plataformas (Android, IOS) utilizando o mesmo código transcrito em Dart. Mesmo atualmente em sua versão BETA 3, demonstra grande estabilidade, desempenho e bons resultados na forma simples de desenvolver aplicações.
Não tratarei muito de seu funcionamento por debaixo dos panos nem irei comparar com outros Frameworks semelhantes, existem bons artigos com essa abordagem, como esse o qual você pode tirar suas dúvidas.
Falaremos um pouco de como funciona o Flutter para o desenvolvimento mobile e logo após, uma breve descrição de como foram desenvolvidas algumas das partes do app de notícias FlutterNews cujo código fonte pode ser encontrado aqui.
Disponível para download na PlayStore:
Enfim, vamos deixar de papo e partir para a ação:
Widget
Tudo em Flutter é Widget, vai de um simples Label a uma screen completa. Essa é uma abordagem bastante interessante que nos facilita na compreensão e construção de views, pois tudo se trata de uma árvore de Widget.
Existem Widgets que tem como papel organização e disposição de elementos (famosos contêineres) como :
Row: Organiza os widgets um do lado do outro
Column: Organiza os widget um abaixo do outro
Container: Como diz o próprio nome: ele é somente um container para por um Widget, que nos possibilita setar parâmetros como padding, margin, background, etc
Stack: Se comporta como uma pilha, adicionando um widget sobreposto ao outro.
Existem muitos outros mas esses são os mais básicos e mais utilizados. Os demais podem ser encontrados aqui.
Fora os Widgets de organização temos componentes para dar cara a nossa aplicação como: Text , Icon, Image, RaisedButton, entre milhares de outros que utilizam o tema Material design ou o Cupertino(Tema do IOS).
Inclusive animações você encontra em forma de Widgets.
Juntando todos esses existentes, ou fazendo do zero utilizando canvas, você pode criar seus próprios Widgets e reutilizá-los em sua aplicação, e se quiser, até disponibilizá-lo em forma de lib para o público.
Montando Layout
Como exemplo, vamos especificar como foi criado o layout do item da lista de notícias do FlutterNews. Ele foi transformado em um Widget para que possa ser reaproveitado em qualquer tela do App. Mais à frente explicaremos como criar um Widget e seus tipos, mas agora vamos focar em como construir um layout.
A imagem acima nos detalha como foi construído o item da listagem de notícias. Começamos de fora pra dentro:
Material: Foi adicionado primeiro para nos dar o efeito de card do material design (poderia ter utilizado o próprio widget Card). Esse Widget é um container pelo qual podemos adicionar atributos de layout do material design como elevation, BorderRadius, entre outros.
Row: Logo abaixo foi adicionado uma row para deixar a imagem e o Widget Column um do lado do outro.
Image: Widget utilizado para exibir uma thumb da notícia.
Column: Esse Widget nos possibilita deixar os textos (título, data e descrição) um abaixo do outro.
Text: Por fim o Widget que nos possibilita exibir um texto. Nele podemos configurar várias características em seu Style como textSize, textColor, entre outros. Foi utilizado para exibir o título, data e descrição da notícia.
Desenhando a árvore de Widgets do item da notícia temos esse resultado:
Essa análise do layout é um bom exercício para criação de um novo layout. Podemos fazer esse mesmo passo de divisão e posicionamento de Widgets em um Layout passado por um design para sabermos como construí-lo.
Pronto, sabemos como podemos posicionar as views. Em linhas de códigos removendo alguns detalhes e estilos teremos isso:
Veja, apesar de construirmos layout em código, é bastante simples codificar uma view no Flutter. Mais informações e tutoriais de como construir layouts você encontra aqui.
Criando Widget do Item da Lista
Podemos criar dois tipos de Widgets, os que precisam ser redesenhados por conta de qualquer tipo de interação(StatefulWidget) e aqueles que só são desenhados uma vez para exibição(StatelessWidget).
Em nosso caso (item da lista), utilizaremos somente como exibição de informação, ou seja, uma vez desenhado não precisamos altera-lo, ele não muda de estado, então usaremos “StatelessWidget”.
Criamos então a nossa classe Notice estendendo de StatelessWidget:
Adicionamos os atributos que serão utilizados para exibir no item da notícia: _img, _title, _date, _description, _category, _link, _origin e um construtor e implementamos o método “Widget build(BuildContext context)”, obrigatório por estendermos de StatelessWidget, método pelo qual retornamos a View que desejamos que seja exibida.
Agora vamos adicionar a View que construímos mais acima, adicionando alguns elementos para fazer o texto se adaptar, definir altura fixa, estilos de texto, margens, etc:
Dessa forma finalizamos a criação do widget Notice que será o item de nossa listagem.
Criando a lista de notícias
Para adicionarmos a nossa listagem de notícias, vamos precisar criar um Widget que irá representar essa tela. Como essa lista irá mudar de estado, ou seja, inicialmente a tela estará vazia e após receber a resposta do servidor deverá atualizar a tela para exibir as noticias, iremos utilizar um Widget do tipo StatefulWidget.
O escopo ficaria então desta forma:
Perceba que tivemos que implementar um “createState()” que recebe uma classe que estende de “State”. Isso ocorre por conta do controle de estado desse widget, já que ele pode mudar durante seu ciclo de vida. O “_NoticeListPageState” vai ser o estado de nossa “NoticeList”. Se não ficou muito claro você pode saber um pouco mais seguindo o get-started aqui.
Então vamos lá. Adicionamos então uma “List” para armazenar nossa lista de “Notice” e o nosso repositório “NewsApi” que será responsável por fazer a requisição no servidor e retornar a lista de notícias. Não vou entrar muito em detalhes de como funciona esse repositório na aplicação FlutterNews, só precisamos supor que ele nos retorna um ArrayList JSON nesse formato abaixo:
Então você poderá criar esse repositório retornando esse json mocado:
E por fim adicionar o widget de lista dentro de nosso “Widget build(BuildContext context)” ficando dessa forma:
Agora só falta chamarmos nosso repositório que irá retornar as notícias e popular a lista “_news”. Como queremos que essa chamada ao repositório ocorra assim que o Widget é renderizado, podemos chama-lo dentro de um método que podemos sobrescrever chamado “void initState()”, ele é executado assim que inicia o nosso estado.
Adicionando o método de carregar as notícias finalizamos nosso Widget de listagem assim:
No método “loadNotices()” chamamos nosso repositório, após receber a lista de notícias em JSON, iteramos com “Foreach” para criarmos nossos “Notice” e ir adicionando na lista “_news”.
Como o foreach é realizado dentro de “setState()”, ao finalizar sua operação forçamos o Widget a ser redesenhado, então o “Widget build(BuildContext context)” é chamado novamente, só que dessa vez a nossa lista “_news” não está vazia, desenhando então cada item da noticia na tela.
para testarmos tudo isso é só adicionar nosso Widget “NoticeList” na Home de nossa aplicação:
É isso aew galera. O que acharam? Essa foi uma breve explicação de como foi feito a listagem de noticias do app FlutterNews. Postarei futuramente o tutorial do destaque de notícias do app e a navegação para o detalhe da notícia.
Espero que tenham gostado, deixem seus comentários a baixo e um forte abraço. VLW!!!
