Descomplicando o JSON em Flutter
Durante o ano de 2019, percebi o crescimento de perguntas relacionadas ao Flutter (Dart) no StackOverflow em Português, no qual várias delas são semelhantes a seguinte dúvida:
“Como trabalhar com JSON?”
Decidi então criar essa história para auxiliar os desenvolvedores que estiverem começando a trabalhar com essa ferramenta ou até mesmo aqueles que já trabalham com ela.
Nossa comunidade está crescendo no Brasil!
Feito para quem já possuí alguma experiência!
Meu foco aqui não é explicar o que é o Flutter e nem dar explicações detalhadas sobre JSON, mas sim trazer explicações mais técnicas sobre o assunto já mencionado.
Obtendo os dados de um JSON simples
Vamos tomar como base um JSON que retorna os dados de um usuário
{
"id":"001",
"nome":"Matheus Ribeiro",
"telefone":"5514981234567",
"email":"matheus@matheus.com"
}Extraindo os dados
Deixe as coisas bem organizadas! Não é porque você é iniciante ou “expert” que deve fazer tudo de qualquer jeito, certo?
1. Criando a classe Usuario
Uma classe simples apenas para guardar os dados do usuário.
2.Criando o método fromJson para a classe Usuario
Com a classe já criada, precismos criar o método que irá pegar os dados do JSON e alimentá-la!
3. Utilizando a classe que criamos
Como já elaboramos tudo certinho, a utilização é muito simples!
Obtendo os dados de um JSON complexo
Vamos implementar o JSON que utilizamos na secção anterior para deixá-lo mais completo, como se fosse algo utilizado no dia-a-dia.
{
"usuarios":[
{
"id":"001",
"nome":"Matheus Ribeiro",
"telefone":"5514981234567",
"emails":[
{
"email":"contato@matheus.com",
"tipo":"contato"
},
{
"email":"financeiro@matheus.com",
"tipo":"financeiro"
}
]
},
{
"id":"002",
"nome":"Miranda",
"telefone":"5514981765432",
"emails":[
{
"email":"contato@miranda.com",
"tipo":"contato"
},
{
"email":"financeiro@miranda.com",
"tipo":"financeiro"
}
]
}
]
}Agora está sendo retornado dois clientes, onde cada um possuí vários e-mails.
Extraindo os dados
Antes de tudo, precisamos dar uma atenção especial para os e-mails do usuário, que agora podem ser vários…
1.Criando a classe Email
Uma classe simples apenas para guardar os dados do e-mail.
2. Criando o método fromJson para a classe Email
Da mesma forma feita na classe Usuario, agora vamos criar o método fromJson para a nova classe Email.
3. Tratando os e-mails dos usuários
Agora os usuários podem ter um ou mais e-mails. Então precisamos tratar essas informações de um forma diferente da demonstrada na secção anterior.
Repare que os e-mails agora são salvos em uma List<Email>, ou seja, teremos uma lista de e-mails para cada usuário.
4. Utilizando as classes que criamos
Tendo em vista que agora estamos recebendo os dados de mais de um usuário, teremos que armazenar tudo em uma lista para então utilizá-los, assim como fizemos com os e-mails.
Chegamos ao fim dessa história!
Espero ter conseguido passar para vocês, de forma clara e bem direta, como fazer o uso de JSON em Flutter (Dart).
O meu intuito foi mostrar como podemos estruturar classes baseadas em um JSON e trabalhar com elas de uma forma prática. Criamos toda a lógica de uma forma manual, porém, existem Packages no Pub.dev que podem fazer todo esse trabalho para você!
Como por exemplo o Package “json_serializable” que gera todos esses métodos “fromJson” manualmente para nós.
