Flutter: How to parse JSON in 2 minutes

In this blog, I am going to explain the simplest way to parse any JSON in Flutter. As the topic name itself says it will take a couple of minutes, so let’s look into this how is it possible?

First, we required JSON data which hosted on some API.

Example:

https://5f383e6541c94900169bfd42.mockapi.io/api/v1/user_details

{"name":"Simon Baker","rating":2250,"played":34,"won":9,"winning_percentage":26,"image":"https://media.apnarm.net.au/media/images/2018/04/18/b881317258z1_20180418095709_000gd0123d312-0-75q7vf6zk34soynd4q2_fct2256x1692x75_t1880.jpg"}

This URL contains the above JSON which we are going to parse, but you will say how this is very basic JSON but believe me, even if you have long JSON it will still take the same time.

Looks Interesting!!!

All magic in link https://javiercbk.github.io/json_to_dart/ which will help you to convert your JSON to Dart Model.

Follow the below steps for achieving the ultimate goal of this blog

1. Open URL https://javiercbk.github.io/json_to_dart/
2. Copy JSON data from API(ex: https://5f383e6541c94900169bfd42.mockapi.io/api/v1/user_details)
3. Finally, Click on the Generate Dart button which generates the dart model. (We can also add the name of the class, which will generate a model with that class name)

That's it this is all we want to parse JSON, the below example will show how all above we can integrate in the simplest way.

Example: In this example, we are parsing JSON using the UserDetails Model, and finally fetching the name of the user from the model.

Code Snippet:

import 'dart:convert';

import 'package:http/http.dart' as http;

void main() async {
  String url =
      "https://5f383e6541c94900169bfd42.mockapi.io/api/v1/user_details";
  final response = await http.get(url);
  print(response.body);

  UserDetails userDetails = UserDetails.fromJson(jsonDecode(response.body));
  print(userDetails.name);
}

class UserDetails {
  String name;
  int rating;
  int played;
  int won;
  int winningPercentage;
  String image;

  UserDetails(
      {this.name,
      this.rating,
      this.played,
      this.won,
      this.winningPercentage,
      this.image});

  UserDetails.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    rating = json['rating'];
    played = json['played'];
    won = json['won'];
    winningPercentage = json['winning_percentage'];
    image = json['image'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['rating'] = this.rating;
    data['played'] = this.played;
    data['won'] = this.won;
    data['winning_percentage'] = this.winningPercentage;
    data['image'] = this.image;
    return data;
  }
}

Output:

I/flutter ( 5152): {"name":"Simon Baker","rating":2250,"played":34,"won":9,"winning_percentage":26,"image":"https://media.apnarm.net.au/media/images/2018/04/18/b881317258z1_20180418095709_000gd0123d312-0-75q7vf6zk34soynd4q2_fct2256x1692x75_t1880.jpg"}
I/flutter ( 5152): Simon Baker

I hope, you learn something new which will save your development time :)

Please subscribe to the channel for more fluttery things, also You can follow me on the below platforms as well.

Youtube Tutorial:

Github: https://github.com/jitsm555

Youtube: TechMadness

StackOverflow: https://stackoverflow.com/users/5106574/jitsm555