Flutterexperts

For those of you who do not know what is Flutter then

Flutter is an open-source mobile application development SDK created by Google. It is used to develop applications for Android and iOS.

or you can visit https://flutter.dev

let’s talk about JSON parsing in flutter.

I know it is really confusing for beginners to understand how to parse JSON data.

Let’s Start with a JSON example

Suppose I want to access the articles list but the articles have many attributes and we need to parse the article array into our app.

Let’s see what we have in the article

So How we are going to do that?

Step 1: Create a PODO

First of all, we have to create a PODO (Plain Old Dart Object) for a particular article.

To access source in the Article we also have to create a PODO for Source.

https://gist.github.com/ashishrawat2911/c5eeb2f47a7b24b437670f1aeacf81ef#file-article-dart

Step 2: Make the network request

I am using the NewsApi to retrieve the JSON data

I have the URL and I want the response when I request to the URL.

Step 3: Decode the response

Now I have the response I can get the list of articles.

If you are an android developer and you know the traditional way of parsing the JSON data then you must remember that first we retrieve the JSON data and get the JSON array then iterate the JSON array and map to the Java objects we have done the same here.

var rest = data["articles"] as List;

Now the rest will have the JSON array and we will iterate the JSON array and map to the Dart objects.

Step 3: Map the JSON objects to Dart Objects

Complete method of parsing the JSON array

https://gist.github.com/ashishrawat2911/8a8cd94761b491e6876c8b1308f0cb78#file-jsonmethod-dart

Complete code.

https://gist.github.com/ashishrawat2911/0787c959bd151270bef9bee7ad546b37#file-newsjson-dart

The final app will look like this:

If you still have any problem, I have linked my Github Repo

ashishrawat2911/Flutter-NewsWeb
Contribute to ashishrawat2911/Flutter-NewsWeb development by creating an account on GitHub.github.com

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.
Connect with me on Linkedin and Github

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---