JSON Parsing in Flutter

Prakash Sharma
2 min readSep 15, 2021

--

Nowadays, we don’t have a single app that is not connected to the internet one way or another, and making API calls and fetching the data is very common.

The client (Android or iOS device/ Website) makes a request to the server and the server returns the response. we will use http package for this demo. For simplicity, we will see the get request and parse its response. I am going to use the flickr public API for demo purposes we will make an image search request and parse the response.

PC: flicker.com cat search

Add dependency for http package to your pubspec.yaml, it will enable you to use get method from http.

Make a network call to given url , this url will give you a json response which is something like

I am using JSON viewer awesome plugin for JSON formatting. We have to parse this JSON in the model. Let’s say we need url_m` and title property. If you just want to show the data to the user and don’t worry about caching or sending the data over the network then we could use the simple solution using jsonDecode & jsonEncode method as follow :

The above one is a simple way to decode the JSON value and use it. Now, we will see the actual way that you can use it for production applications. We will create a model with toJson & fromJson method. This will be useful for parsing the JSON to Object that can be used directly in dart code and vice-versa.

The model will look something like

Now, you can use this model in a simple way as shown below

Please comment below if you have any queries related to that. If it solved your problem don’t forget to clap as much as you can.

--

--