Flutter Create JSON Parse ListView using ListTile Android iOS Example

JSON data exchange format is used in all the mobile applications to transfer information between two nodes Client and Server. Using JSON we can transfer hundreds of records in a single object within a few seconds and process them. In this tutorial we would Flutter Create JSON Parse ListView using ListTile widget in Android iOS app. ListView widget is used to show multiple items in a single linear list format. ListTile is a sub part of ListView because it can hold two types of text with fixed height width based format. ListTile has a property leading which is used to add Icon in front of every List item. So let’s get started 🙂 .

Note: We are using JSONPlaceholder online JSON for testing purpose website URL in our app. The URL of JSON is jsonplaceholder.typicode.com/users. There are 10 user records are present in this JSON file.

Screenshot of JSON:

Contents in this project Flutter Create JSON Parse ListView using ListTile Android iOS Example Tutorial:

1. Configure http.dart package for Flutter Android iOS Project:

1. The http.dart package is one of the most commonly used package in Flutter apps for data exchange between two nodes. The http package dose not come with flutter project, We have to manually install the http.dart package in our flutter project. So open your project’s pubspec.yaml file in any text editor.

2. Open the pubspec.yaml file in code editor and find dependencies line and put http: ^0.12.0 in next line like i did in below screenshot.

Complete Source code for my pubspec.yaml file after done changes:

3. After done saving the file, We have to open our flutter project Root directory in Command Prompt or Terminal and execute flutter pub get command. This command would download the newly added HTTP package in our flutter project.

2. Start Coding for App:

1. Import material.dart, dart:convert, http.dart package in your app’s main.dart file.

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

3. Creating main class named as MyApp extends with State less widget. In this class we would call JSONListView class which we would make in next few steps.

4. Create a class named as GetUsers. Inside this class we would make 4 different type of variable named as id, name, email, phoneNumber. We would make factory GetUsers.fromJson() method in this class and here we would pop up the JSON items form online JSON. The name pass in json[] should be same as passed in JSON file.

5. Create a class named as JSONListView extends StatefulWidget. In this class we would make the createState() method of State and pass the next CustomJSONListView class with it.

6. Create a class named as CustomJSONListView extends with State. This is our main ListView parsing class.

7. Creating a final String variable named as apiURL. In this variable we would pass our JSON API URL.

8. Create a Future ASYNC function named as fetchJSONData() along with GetUsers class works as List. In this function we would pass the complete JSON.

9. Creating Widget build area in CustomJSONListView class. Now we would make the FutureBuilder widget which creates the widget based on newly come snapshot data. Now first we would check if the snapshot is empty or not than hide the CircularProgressIndicator() widget and display the ListView. We are using ListTile widget in ListView widget for displaying data with leading Circular avatar based text.

10. Complete source code for main.dart file:


Flutter Create JSON Parse ListView using ListTile Android iOS Example

One Comment

  1. Awesome post! Keep up the great work! 🙂

Leave a Reply

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