Flutter HTTP Pub Package to Fetch Parse JSON ListView Example

Hello friends, It’s been so long since I had posted a tutorial on JSON in flutter. Friends as we all know if we start learning flutter and choose flutter as carrier then we must have to learn JSON parsing in flutter. Because in today’s world most of applications are dynamic and their content is coming directly from online server. Dynamic apps are easy to handle by their users because they can change any content inside the app using few clicks and typing. Therefore administrator does not need to contact the app developer every time when he wants to make any changes. So in flutter to Fetch and Parse JSON, a very handy library Pub package known as http 0.13.3 comes. Today most of flutter developers usages the http package. So today we would learn about Flutter HTTP Pub Package to Fetch Parse JSON ListView Example in Android iOS with CardView.

Content in this project Flutter HTTP Pub Package to Fetch Parse JSON ListView Example :-

1. First of all we have to install the HTTP package in our flutter application. So open your project’s main Root folder inside Command Prompt in windows and Terminal in MAC and execute below command.

Screenshot after done installation :-

2. Now next step is to start coding for the app. So open your project’s main.dart file and import material.dart , dart:convert and http.dart package.

3. Creating void main runApp() method and here we would call our main parent MyApp class.

4. Creating our main MyApp extends StatelessWidget class. In this class we would call ListView_JSON class as its child.

5. Now we would make another stand alone class named as ParseJSON. We would use this class as a dynamic List to parse each item from JSON which we would fetch from server.

Note:- Please make sure here in the JSON – json[‘id’] , json[‘name’] , json[’email’] id, name and email should be same as our JSON object names.

6. Creating a class named as ListView_JSON extends StatefulWidget. In this class we would make CustomListTileView with createState() method to enable mutable state management in given class child.

7. Creating our main Child CustomListTileView class extends State<ListView_JSON>.

8. Creating a String variable named as apiURL. We would give here the API URL.

9. Creating a Future type of fetchJSON ASYNC method. In this function we would Fetch and Parse JSON.

10. Creating Widget Build area. Now we would here make a ListView widget with Card widget and put the ListTile widget inside it to make the Card View List View.

11. Complete source code for main.dart file :-

Screenshots:-

Leave a Reply

Your email address will not be published. Required fields are marked *