Flutter — Construindo uma linda aplicação de notícias — Parte 2
Bem galera, continuaremos falando sobre o Framework Flutter, utilizando como case referência, o aplicativo FlutterNews onde seu código fonte pode ser encontrado aqui.
Algumas coisas já explicadas anteriormente, não entrarei mais em detalhes, portanto quem não acompanhou, recomendo dar uma olhadinha na Parte 1.
Já aprendemos o que é o Framework Flutter, conhecemos os Widgets mais comuns, e construímos nosso próprio Widget para representar um item da listagem. Agora, veremos como implementar o BottomNavigation, como realizar navegação para outras telas (ir para a tela de detalhe da notícia) e darei uma referencia de como foi implementado o slide do destaque. Enfim, vamos ao que interessa!
Conexão com API
Antes de voltarmos com layout, vamos dar uma atualizada em nossa classe NewsApi.dart do projeto anterior, para pegarmos informações de uma API em vez de um string JSON mocada.
Então basta adicionarmos o package(lib):
http: ^0.12.0em nosso “pubspec.yaml” e importarmos a classe http adicionando:
import ‘package:http/http.dart’ as http;
Modificaremos nossa classe para que fique desse jeito:
Veja como é muito simples realizar uma chamada http no Dart. Simplesmente chamamos “http.get(url);” e obtemos o resultado da requisição em um “http.Response”. Mais informações sobre a classe http você pode dar uma olhadinha aqui.
OBS: Observe que utilizamos o “await” na chamada, isso significa que é uma chamada assíncrona, ou seja, ele é executado em uma outra Thread. Por conta disso utilizarmos o “async” no método e retornarmos uma “Future <List>” em vez de uma simples “List”. Infelizmente não explicarei isso detalhadamente nesse artigo, no entanto, se quiser saber um pouco mais sobre chamadas assíncronas no Dart você encontrará aqui.
BottomNavigation
Para construirmos esse componente, implementamos um Widget padrão do material design chamado BottomNavigationBar, ele nos possibilita 2 formas diferentes de exibição como veremos.
Criaremos um método que retornará nosso BottomNavigationBar:
Como observado, nosso “BottomNavigationBar” recebe no parâmetro “items” um array de “BottomNavigationBarItem”, eles são nada mais que os itens exibidos em nossa NavigationBar, assim temos um “BottomNavigationBarItem” para “Recentes”, um para “Notícias”, e outro para “Sobre” com seus respectivos ícones e cor de fundo.
O método “onTabTapped” passado em “onTap” é por onde receberemos a ação do clique (ou seleção de um item) de nossa “BottomNavigationBar”. Utilizamos ela para salvar a posição selecionada atualizando a variável “_currentIndex” que por sua vez faz atualizar a visualização de nossa barra para o item clicado, pois essa mesma variável é utilizada no parâmetro “currentIndex” da “BottomNavigationBar”.
Adicionando a grande(rsrs) quantidade de código mencionada acima, e usando nosso método no parâmetro “bottomNavigationBar” da “Scaffold”( de nossa listagem elaborada na Parte 1 fica assim:
Muito simples de adicionar “BottomNavigation” né? Pronto. agora é só utilizar da forma que desejar: Utilizando o item selecionado(_currentIndex) para mudar o Widget do body ou utilizando PagerView (exemplo) que irá nos possibilitar mudar a tela selecionando um item na “BottomNavigation” e também utilizando o gesto swipe.
E se quisermos deixar a nossa “BottomNavigationBar” com essa cara:
Basta somente definirmos o “type” para “BottomNavigationBarType.shifting” e brincarmos com as cores de fundo das “BottomNavigationBarItem”:
Menu de categorias
A nossa visualização de categorias é nada mais que uma listagem semelhante ao que utilizamos para listar as noticias só que na horizontal. Então vamos criar nosso método para cria-la:
Para a lista ficar na orientação vertical precisamos simplesmente definir o atributo “scrollDirection” para “Axis.horizontal” como mostra o código acima. Adicionamos essa lista dentro de um Container para podermos definir uma altura fixa de 55.0.
Vamos então implementar o método “_buildCategoryItem” que irá criar os itens de nossa categoria:
Em nosso widget que representa o item da categoria foi envolvido por um “GestureDetector”. Isso foi necessário para podermos captar o gesto de “tab” no item.
O método “onTabCategory” é executado quando é acionado o evento do “onTab”(usuário toca no item). Nele atualizamos nossa variável “_category_selected” para controlar a categoria selecionada e para definir a cor de nosso item, utilizando a cor “Colors.blue[800]” para selecionado e “Colors.blue[500]” para não selecionado(linha 15 do bloco de código). E é nela que poderíamos solicitar o carregamento das notícias da categoria selecionada. Como nossa api é fixa não faremos isso, mas seria nada mais que chamar o mesmo método de carregar notícias “loadNotices()” só que customizado para receber um parâmetro da categoria que consequentemente concatenaria na url como queryParams ou coisa do tipo.
Os demais componentes utilizados como “Material”, “Text”, “Container” já vimos e o único atributo interessante que podemos sitar é o “borderRadius” presente no widget “Material”, ele foi configurado com o valor:
“const BorderRadius.all(const Radius.circular(25.0))”
Isso nos possibilita deixar as bordas arredondadas da forma que desejamos.
Agora falta somente adicionarmos nossa listagem de categorias no topo da tela, para isso, editamos o nosso “Scaffold”, e o resultado é esse:
Não podemos esquecer de criar e alimentar a nossa lista de Strings que irá conter o nome das categorias “_categorys”:
Chamamos esse método no “initState()”. Isso irá alimentar a lista assim que iniciar o estado de nossa tela.
Emfim, toda a nossa classe NoticeList.dart com as categorias fica da seguinte forma:
Executando nosso app até então teremos o seguinte resultado:
Navegação entre telas
Agora queremos clicar em um item da lista e ser levado para a tela de detalhe da notícia selecionada.
Podemos fazer isso de duas formas:
Utilizando rotas:
Esse método é mais completo e indicado para APPs com muitas telas. Para utilizarmos, temos que configurar as rotas em nossa “MaterialApp” (localizado no arquivo main.dart em nosso projeto) através do atributo “routes” da seguinte forma:
No exemplo acima adicionamos duas rotas, a “/screen1” e a “/screen2” que respectivamente chama sua tela específica (Widget: Screen1,Screen2).
Ao chamar essas rotas, nós substituímos a nossa “home” pela tela configurada na rota. Você pode chamar a rota da seguinte maneira:
Realizando essa chamada, a sua “home” deixa de ser “NoticeList” e passa a ser “Screen1”. Bem simples né?
Existem vários tutoriais bacanas explicando mais detalhadamente esse tipo de navegação, caso queira aprofundar um pouco mais sobre o assunto, aqui tem um bom tutorial.
Utilizando MaterialPageRoute:
Essa é a forma mais simples e básica para abrir uma nova tela. Basta execuar esse código na ação de um click ou onde quiser:
Isso fará abrir a tela “Screen1” assim como na forma anterior, e sem precisar configurar rotas.
Mais informações sobre essa forma de navegação você encontrá aqui.
Tela de detalhe da notícia
Como já aprendemos como navegar entre telas, vamos construir a nossa tela de detalhe:
Como já explicamos todos esses Widgets que serão utilizados, fica como um bom exercício, construir sozinho essa tela de detalhe. Caso tenha alguma dúvida ou quiser dar uma pescadinha ;-) , segue o código de sua implementação:
Agora já temos nossa tela de detalhe! Então vamos adicionar a chamada à ela quando clicarmos no item da notícia. Para isso, adicionaremos em nossa Notice.dart uma Widget chamado “InkWell” que assim como o “GestureDetector”, nos possibilita identificar a ação de clique.
Adicionando ele em nosso item da noticia, o resultado é esse:
Adicionamos o “InkWell” como filho de nosso Material, assim, quando tocarmos no item da notícia será invocado o “onTab” e o método “showDetail” será executado.
Como demonstrado anteriormente, em nosso “showDetail” realizamos a chamada de navegação para exibir a tela de detalhe (Detail) passando como parâmetro as informações que seu construtor exige.
Nossa classe Notice.dart completa então fica assim:
E assim completamos nosso simples App de notícias! :-)
Deixei algumas partes sem demonstrar, como a mudança do body ao tocarmos no “BottomNavigationBar” e a atualização da listagem após selecionar uma categoria. Mas isso foi proposital, a ideia é que vocês possam se aventurar um pouco no código e descobrir de sua maneira como seria essa solução, ajudando em sua compreensão geral da linguagem e plataforma. A final de contar com CTRL+C e CTRL+V não se aprende nada.
Infelizmente não vai caber uma explicação detalhada de como foi feito o Slide destaque do app FlutterNews, mas poderá obter mais informações sobre ele nesse link.
Espero que eu tenha conseguido passar um pouco de conhecimento, tirado algumas dúvidas de como desenvolver e de como funciona um app utilizando o Framework Flutter.
Se você gostou, vá mais a fundo nos estudos porque realmente vale apena, participe de comunidades como FlutterDev, Flutter Weekly, Flutter, ou várias outras que exitem por ai. Existe também a possibilidade de estudar cases de desenvolvimento open source, eles são facilmente encontramos em : awesome-flutter, startFlutter e itsallwidgets, alem de outros milhares de tutoriais que você pode encontrar aqui no Medium.
Deixe seu comentário, um forte abraço, e até a próxima! :-) VLW!
O projeto completo que construímos nesse tutorial você encontra no link abaixo:
