Consumindo API em Flutter Utilizando o Dio

O consumo de API (Application Programming Interface) é uma das funcionalidades mais comuns a serem desenvolvidas durante a produção de um aplicativo. Quem nunca precisou obter os dados de um usuário, carregar informações sobre produtos ou armazenar um comentário, por exemplo?

Independentemente da linguagem, framework ou plataforma para qual o app esteja sendo implementado, todo programador, de modo geral, faz uso de alguma biblioteca para a manipulação de API. Sendo assim, em Flutter, seria interessante também conhecer alternativas para obtenção daquele dado, via HTTP, que seu amigo desenvolvedor do back-end jura que já está disponível na API (kkkkkkk). Com esse objetivo, neste post, farei a apresentação do Dio.

O Dio é um cliente HTTP para Dart, que suporta interceptores, download de arquivo, timeout, entre outras funcões. Para exemplificar o seu funcionamento, neste post, faremos a implementação de requisição e envio de informações em um app em Flutter.

Vamos ao código!

Primeiramente, importamos o Dio em nosso projeto Flutter adicionando a linha abaixo na seção dependencies do arquivo pubspec.yaml:

Com o Dio importado, podemos partir para a nossa implementação. A ideia consiste em carregar a foto, o nome e o email de um usuário e exibi-los no centro da tela do dispositivo. Além disso, também executaremos o envio de dados a um servidor.

Como fonte de dados, utilizaremos o Reqres.in, um site de dados fake que disponibiliza API para testes de front-end. Sendo assim, ele funcionará como nosso back-end e servirá tanto para consumirmos dados quanto para enviarmos informações e recebermos as respostas.

Sabendo disso, implementamos o método initState da nossa classe do tipo Stateful da seguinte forma:

No trecho de código acima, usamos a classe BaseOptions para inserirmos as principais configurações a serem utilizadas nas requisições. No exemplo foram declarados a baseUrl, a qual contém o endpoint da API e o connectTimeout de 5000 milisegundos. Por fim, as options são atribuídas a instância do Dio.

Com o Dio já inicializado, podemos partir para a chamada à API. Para isso,  criamos dois métodos, o getProfile e o submitUser. O getProfile tem como objetivo obter os dados do perfil de um usuário. Por sua vez, o submitUser envia, via POST, os dados do usuário junto com sua profissão para o servidor. É importante mencionar que ambos os métodos são assíncronos, uma vez que dependem do retorno da resposta do servidor e devem ser executados em background. O código fonte desses dois métodos pode ser visto abaixo:

O método getProfile obtém os dados do usuário por meio de uma requisição GET ao respectivo endereço do Reqres.in. A variável count atribuída à URL, ao ser incrementada, serve apenas para receber um novo usuário diferente do obtido anteriormente. A resposta a essa chamada é armazenada numa instância da classe Response, a qual é usada para atualizar a foto e os campos dos dados do usuário.

O método submitUser foi implementado para enviar os dados do usuário ao servidor. Os dados a serem enviados são o nome e a profissão (job) do usuário, sendo que este último é inserido manualmente por meio de um TextField. Eles são atribuídos ao campo data da instância do Dio e destinados ao servidor via POST. Como resposta, essa chamada recebe um JSON contendo as informações resultantes da criação do novo usuário. Esse JSON é exibido na tela do app após o recebimento da resposta.

A invocação dos métodos getProfile e submitUser é feita por meio de MaterialButton, nomeados de “Obter Perfil!” e “Enviar!”, respectivamente. Como o objetivo deste post não é mostrar o desenvolvimento da interface, e sim, focado no Dio, não irei detalhar os widgets usados na implementação da tela. Sendo assim, segue abaixo o gif que apresenta o funcionamento do nosso app:

Bom, é isso.

Espero ter conseguido apresentar o Dio e ajudado a dar uma noção de como utilizá-lo.

Para ver o código fonte completo do projeto que foi desenvolvido neste post acesse: https://github.com/luizmarcus/Flutter/tree/master/exemplo_dio

Qualquer dúvida, deixa um comentário.

Deixe uma resposta