Consumindo arquivos JSON no Dart

feliperfdev

Felipe Ribeiro

Posted on July 27, 2021

Consumindo arquivos JSON no Dart

Neste artigo pretendo mostrar como consumir arquivos JSON no Dart. Não é bem como consumir uma API, algo que dependa de requisições web. Se trata de fato em consumir arquivos JSON da máquina local e atribuindo-os a objetos Dart.

Estruturando o arquivo JSON

Vamos criar um arquivo JSON em nosso projeto e, em seguida, estruturá-lo da seguinte forma:

 [
 {
 "id": 1,
 "nome": "Bulbassaur",
 "regiao": "Kanto",
 "tipos": [
  "Grass",
  "Poison"
]
},
{
 "id": 2,
 "nome": "Ivyssaur",
 "regiao": "Kanto",
 "tipos": [
  "Grass",
  "Poison"
]
},
{
 "id": 4,
 "nome": "Charmander",
 "regiao": "Kanto",
 "tipos": [
  "Fire"
]
}
]
Enter fullscreen mode Exit fullscreen mode

Antes de mais nada, vamos pegar esse arquivo JSON que escrevemos e chamá-lo de poke_db.json, por exemplo.

Definindo a classe

class Pokemon {
 int id;
 String? nome;
 String? regiao;
 List<String>? tipos;

 Pokemon({this.id, required this.nome, this.regiao, this.tipos});
}
Enter fullscreen mode Exit fullscreen mode

Criando o método de deserialização do JSON


Antes de partirmos para a criação do método, vamos entender o que é deserializar um objeto JSON?
O que acontece é que o que está presente em nosso "poke_db.json" são dados prontos e fresquinhos para serem consumidos, e nós precisamos de alguma forma utilizar esses dados. Para isso, nós pegamos esses dados "fresquinhos" e reconstruímos eles na forma de um model, um modelo. No caso, atribuímos esses dados aos atributos de uma classe.


No mesmo arquivo da classe criada, criaremos o método fromJson().
O que acontece nesse método?

O fromJson serve para atribuir valores vindos de um objeto JSON para sua classe. Um objeto JSON é reconhecido como um Map devido ao seu comportamento e estruturação de chave-valor. Então pegamos os atributos da classe e fazemos com que recebam os valores do JSON referentes às chaves do Map correspondentes a estes.
Basicamente, esta função é uma espécie de MAPEAMENTO da classe para um objeto JSON.

Pokemon.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    nome = json['nome'];
    regiao = json['regiao'];
    tipos = json['tipos'].cast<String>[]();
  }
Enter fullscreen mode Exit fullscreen mode

Por qual motivo a tipagem do Map utilizado como parâmetro é <String, dynamic>?
Bom, já sabemos que o tipo informado no lado esquerdo é a tipagem das chaves. Já no direito, é a tipagem dos valores.
No caso, utilizamos o dynamic para os valores justamente pelo motivo de que podemos ter números (int, double), textos (String), listas (List), Maps...

Exemplo de um JSON genérico

{
   "chave": "valor"
}
Enter fullscreen mode Exit fullscreen mode

Vamos consumir o objeto JSON

Vamos criar um arquivo chamado poke_repository.dart.

Neste arquivo iremos criar algumas funções que ficarão responsáveis pelo processo de consumo do nosso objeto JSON.

Primeiramente iremos realizar alguns imports

import 'dart:async';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'package:pokemon_json/poke_model.dart'; // import da classe
Enter fullscreen mode Exit fullscreen mode

Criaremos uma função para carregar a String contendo todo o arquivo poke_db.json.

É muito importante lembrar de colocarmos o caminho do arquivo JSON nos assets do nosso pubspec.yaml!

assets:
    - lib/poke_db.json
Enter fullscreen mode Exit fullscreen mode
Future<String> _carregarPokemonJSON() async {
  return await rootBundle.loadString('lib/poke_db.json');
  // Aqui passamos o [caminho] do arquivo JSON
}
Enter fullscreen mode Exit fullscreen mode

Tendo a String do nosso arquivo JSON carregada, vamos criar uma função que irá nos retornar a lista contendo os objetos Dart de Pokémon.

// Como temos uma lista em nosso objeto JSON, podemos então dizer para nossa função que pode aguardar uma List<Pokemon>
Future<List<Pokemon>> carregarPokemon() async {
  // Atribuímos a String de todo o JSON para a variável pokeJsonString
  String pokeJsonString = await _carregarPokemonJSON();

  // Agora utilizamos o método json.decode() para "decodificarmos" essa String
  final respostaJson = json.decode(pokeJsonString);

  // criando lista genérica para armazenar os Pokémon do objeto JSON
  final lista = <Pokemon>[];

  // Atribuindo cada objeto da lista JSON para a classe Dart Pokémon utilizando o método Pokemon.fromJson()
  for (var pokemon in respostaJson) {
    final poke = Pokemon.fromJson(pokemon);
    lista.add(poke);
}

  // e finalmente teremos a lista com nossos Pokémon
  return lista;
}
Enter fullscreen mode Exit fullscreen mode

Pronto, com esta última função sendo chamada em alguma parte de seu código você já pode ter acesso aos dados do poke_db.json.

Exemplo:

Future<void> main() async {

 final listaPokemon = await carregarPokemon();

 print(listaPokemon[0].nome); // Bulbassaur


 for (Pokemon pkmn in listaPokemon) {
   print(pkmn.nome);
   /*
   Bulbassaur
   Ivyssaur
   Charmander
  */
}
}
Enter fullscreen mode Exit fullscreen mode

Artigo que possa vir a te ajudar em caso de dúvidas mais específicas em relação ao Dart
Dart4Noobs

💖 💪 🙅 🚩
feliperfdev
Felipe Ribeiro

Posted on July 27, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Consumindo arquivos JSON no Dart
flutter Consumindo arquivos JSON no Dart

July 27, 2021