Flutter: Como consumir uma API Rest
Passo a passo de como construir um app completo que consuma dados terceiros de forma fácil e segura. Da forma mais simples e eficaz.
Meu intuito com meus tutoriais é deixarem da forma mais simples e direta possível, então vamos direto ao ponto.
Vamos fazer um app que converta várias moedas ao mesmo tempo(dólar, euro, libra, real etc…). Em que ao inputar um valor de determinada moeda teremos uma modificação no estado da aplicação construindo o valor das outras moedas de forma exata e confiável, consumindo a API com os dados em JSON da API.
O flutter possui uma uma biblioteca que já converte os dados JSON de forma que ele fique pronto para já consumirmos. Então de forma resumida vamos precisar importar as seguintes bibliotecas, tanto para convertermos os dados tanto para recebermos os dados de forma Rest.
Como disse anteriormente vamos consumir dados de uma API terceira, então você vai precisar obter a sua chave seja de qual API for. Seguindo você vai precisar criar uma variável que receba os dados onde vai ser colocada a chave da seguinte forma:
Caso você faça como eu eu queira colocar isso em um repositório público, há uma forma de esconder a sua chave.
Que eu já ensinei de uma forma simples e direta em um tutorial anterior e você pode acessá-lo por aqui
Agora que já estamos recebendo os dados, precisamos requisitá-los da forma correta
Para isso vamos precisar trabalhar com futuro, algo que no flutter é bastante simples de fazer, aonde vamos ter um estados que será esperado um resultado no futuro, e para isso trabalhamos com Maps. Com isso estamos falando de recebermos ele de forma assíncrona, e vamos utilizar o async/await para isso. Vamos criar uma função getData() e adicionar uma variável que receberá os dados da forma de futuro como acabamos de descrever
Agora que estamos recebendo os dados da forma correta, vamos começar a construir a nossa aplicação e passarmos como o body do nosso app vai receber esses dados.
Todo o nosso código que usamos nesse projeto está no gitHub, onde você pode acessar e dar uma estrela🌟 se gostar do meu trabalho! O respositório é se chama flutrer_estudo aonde está todo os meus apps que construi ao longo da minha jornada aprendendo flutter. O link de acesso você encontra aqui.
Continuando vamos passar a nossa função getData() feita antes, especificando que ela está em um estado futuro.
No Flutter como tudo é um widget! Vamos precisar do widget FutureBuilder, onde é obrigatório passarmos os parâmetros future(onde iremos passar a função getData() que recebe nossos dados) e o builder onde especificaremos os dados que queremos receber.
No nosso caso passamos os nomes da árvore JSON presentes na API que utilizei que são os valores das moedas.
Agora a única parte que nos resta é criarmos os inputs que será a nossa interface, então vamos.
Não vou me estender nessa parte para o tutorial não ficar massante, até porque todo o código se encontra aqui, basta ir em lib/main.dart
Mas basicamente para um input vamos precisar de um widget TextField, que receberá um controller, keyboardType, e um decoration
Como vamos ter vários inputs, criei uma função que retorna esse widget
Os parâmetros passados nessa função são extremamente importantes, pois são com eles que vamos passar os dados do nosso TextField que diferenciará um input de outro.
Agora vamos apenas chamar a função no nosso return para que seja construído toda a nossa interface
Vamos utilizar o widget Divider para passarmos uma leve divisão entre um input e outro.
Dessa forma caso o usuário possua uma conexão com a internet e esteja tudo certo com a nossa API, ele irá utilizar a aplicação!
Caso contrário ele cairá no nosso switch
Todo o nosso estilo padrão da aplicação está aplicado dentro da nossa função inicial runApp(), aonde mais uma vez você econtra o código completo aqui
E pronto! Nosso app estará fazendo a conversão normalmente, caso queira testar a API que estamos usando é da hgbrasil.com
Espero que tenha de ajudado de alguma forma! Caso tenha gostado não se esquece de visitar meu GitHub e dar aquela 🌟 de respeito, ou se gostou do texto, pode me ajudar com um aplauso! De qualquer forma estou extremamente grato por estar aqui.
Obrigado por me acompanhar até esse momento.
Se quiser pode contribuir com qualquer um dos meus repositórios públicos.
Até a próxima!
