Flutter Custom JSON ListView with Multiple Text Items Example Tutorial Android iOS

In our previous tutorial we have created JSON ListView with Single type of single item but, In this tutorial we would create Flutter Custom JSON ListView with Multiple Text Items Example. All the items is coming directly from our online hosting + domain server. Where we have hosted MySQL database using PhpMyAdmin control panel. All the data is stored in MySQL database Table. We would make a API(Application Programming Interface) using PHP scripting language which would convert all the MySQL database data into JSON from. So let’s get started 🙂 .

Contents in this project Flutter Custom JSON ListView with Multiple Text Items Example Tutorial Android iOS:

1. Creating MySQL Database with Table :

1. I have a online sub-domain name connected with web hosting. In my hosting panel i have hosted MySQL database using PhpMyAdmin control panel. So first i’ll login into my PhpMyAdmin control panel and select my MySQL database or you can also create your new database.

2. After selecting the MySQL database we have to make a Table in database named as Student_Data with 4 Columns and Hit the Go button to create Table.

3. There are 4 columns in our Table. id, student_name, student_phone_number and student_class. The id datatype should be set as integer and all the other three columns type is Varchar. The length should be 255 and id should be set as Primary Key with Auto Increment. Hit the Save button after making changes.

4. After done creating table the Table structure should look like below screenshot.

5. Now click on the Insert button to insert some records manually.

6. After done inserting records Table will look like below screenshot.

Now all the database creating part is done.

2. Creating PHP Script to Convert all the MySQL data into JSON :

1. Create a .PHP extension file named as getStudentInfo.php and paste all the below code inside it. You have to change the database name, database hostname, database username and database password of your own MySQL database.

Complete Source code for getStudentInfo.php file:

2. We have to upload getStudentInfo.php file on our online web-hosting panel using File Manger. I have a sub-domain named as flutter-examples.000webhostapp.com connected with Web-hosting space. After uploading file to our server the File path will be https://flutter-examples.000webhostapp.com/getStudentInfo.php . This would be our API URL we would use in flutter application. If we would run this URL in web browser then it will show us all the records in JSON format.

Screenshot of JSON:

3. Setting up http.dart package for Flutter Project:

1. We are using the http.dart package in our flutter project to receive data from server. We have to manually install this package in our flutter project. So open your Flutter Project folder and open pubspec.yaml file in any code editor.

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

Complete Source code for pubspec.yaml file.

3. After saving the file we have to open our Flutter Project root folder in Command Prompt or Terminal and execute flutter pub get command. This command would download the http library from online package server and install it.

Now our configuration part has done.

4. Start Coding for App:

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

2. Create void main runApp() method and call our main root MyApp class here.

3. Create a class named as MyApp extends with State less widget. This is our main Root view class. In this class we would call JsonListView() class.

4. Create a class named as Studentdata. In this class we would make 4 variable named as studentID, studentName, studentPhoneNumber and studentSubject. In this class we would populate the data from JSON so the argument must be same as Table columns. We would create the factory Studentdata.fromJson() method where we would populate the items.

5. Create a class named as JsonListView extends StatefulWidget. In this class we would make the createState() method and pass the child class here. The createState() method would enable the mutable state in given class tree.

6. Create a class named as JsonListViewWidget extends State. This would be our main child class.

7. Create a String variable named as apiURL. Here we would assign the API URL in JsonListViewWidget class.

8. Create a Future function named as fetchStudents() in JsonListViewWidget class. In this class we would parse the JSON data with Studentdata class.

9. Create another function named as selectedItem() with Context and String argument. Using this function we would print the Selected Item Student name on screen using Alert dialog message box.

10. Create widget build area in Studentdata class. Here we would create the CircularProgressIndicator() widget with ListView widget. Inside the ListView widget we would make a GestureDetector() widget and put 4 Text views as child in it.

11. Complete source code for main.dart file:

Screenshots:

Flutter Custom JSON ListView with Multiple Text Items Example Tutorial Android iOS

5 Comments

  1. Not working , Still taking loading progresss

    • Muzammil it is working correctly, I have just check the complete code and run into simulator and the data is loading.

    • it loads for long time only if there s an issue with ur backend…check error report and see if you are passing proper values..

      I have tested and the code is working perfectly fine

  2. I have run the code its gives me the black background and shows data in red color.

Leave a Reply

Your email address will not be published.