Create JSON Parsing ListView in Flutter Android iOS Example Tutorial

JSON also known as Java Script Object Notation is one of the famous text based data exchange format used to process structured data. JSON is mostly used to transfer or exchange data between server and mobile applications. It is also one of the safest way to transfer data between two points. Flutter supports JSON data exchange using HTTP libraries. In this tutorial we would Create JSON Parsing ListView in Flutter Android iOS App Example Tutorial. I am creating JSON by myself using MySQL data and to convert MySQL data i am using PHP scripting language. So let’s get started 🙂 .

Contents in this project Create JSON Parsing ListView in Flutter Android iOS Example Tutorial:

1. Creating MySQL database & MySQL Table:

1. Open your hosting server and create a New MySQL database or select existing one in PhpMyAdmin like i did in below screenshot.

2. After selecting database, we have to create a new table named as fruits_name_table with 2 Columns and hit the Go button.

3. We have to create Table with 2 columns in our Table id and fruit_name. The id data type is int and fruit_name data type id Varchar. Id should be set as Auto Increment and Length of both columns is 255. Hit the Save button to create new table with defined columns.

4. After done creating table we have to enter some data in the Table. To enter data manually in table we have to open the Insert button present on PhpMyAdmin screen.

5. Now i am entering some Fruits names in fruits_name_table. Below is the list of Table after inserting fruit names.

Here you go guys, Now the Database and Table creation part is completed.

2. Creating PHP Script to Convert MySQL database data into JSON format:

1. Create a PHP extension file named as fruites_list_file.php and put all the below code inside it.

Source code for fruites_list_file.php file:

2. We have to upload this file on our hosting server. In my case i am using free hosting platform for testing purpose. The web hosting should also have to connect with Domain name. Here i am using free sub-domain name. My sub domain name is flutter-examples.000webhostapp.com  . After uploading file to our server the File path is https://flutter-examples.000webhostapp.com/fruites_list_file.php . If you execute this URL in your web browser the result should look like below screenshot. This file would print all the data in JSON format in browser window.

3. Setup http.dart file for Flutter project:

1. The http.dart file is our main file. This file contain all the useful class and function resources to retrieve data between server and mobile app. We have to manually configure http.dart file for our project. So open your project’s pubspec.yaml file present in your flutter project.

2. Now open the pubspec.yaml file in any code editor and find dependencies. Put http: ^0.12.0 in next line.

Source code of my pubspec.yaml file:

3. Open flutter project in Terminal our Command Prompt and execute flutter pub get command.

4. After executing above command it will automatically download and configure http package in your flutter project.

Here you go now all the configuration part is completed next step is to start coding.

4. Start coding for App:

1. Open your project’s main.dart file and import material.dart package, convert package and http.dart package.

2. Call our main MyApp class using void main runApp() method.

3. Create our main MyApp class extends with StatelessWidget. This is our main calling class. We are calling JsonListView() class directly here which we would create in next step.

4. Create a new class named as Fruitdata. In this class we would define 2 Variables named as id and fName. We would use this class as data List in our project to manage received JSON data.

5. Create a class named as JsonListView extends StatefulWidget. We would define here our main data parsing class with createState() method. This method will enables states in given class.

6. Create a class named as JsonListViewWidget extends with StatefulWidget. This is our main parsing class with ListView widget.

7. Create a String variable named as uri containing our HTTP URL in JsonListViewWidget class.

8. Create a ASYNC function named as fetchFruits() with our created Fruitdata class. In this class we would Parse the JSON from given url and returns in complete object.

9. Create ListView widget and CircularProgressIndicator() widget in Widget build area in JsonListViewWidget class. The loading indicator will automatically hides from the screen after JSON loading completed. We are using MAP method to set data in ListView.

10. Complete source code for main.dart file:

Screenshots:

Create JSON Parsing ListView in Flutter Android iOS Example Tutorial

Leave a Reply

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