Flutter Custom JSON ListView with Images Text Android iOS Example Tutorial

JSON ListView with images and text is most commonly used in all mobile applications. We have seen so much apps in our life like social media apps, online e-kart apps like Flipkart, Amazon etc. They all will show us the data in multiple images and Text forms. The data is categorized in multiple choices but shows in vertical ListView format. The data is directly coming from online server using a API URL and we would parse the JSON in our flutter app. After done parsing data we would shows all the JSON data in ListView. So in this tutorial we would Create Flutter Custom JSON ListView with Images & Text in Android iOS Example Tutorial.

Contents in this project Flutter Custom JSON ListView with Images & Text Android iOS Example Tutorial:

1. Creating MySQL Database and Table:

1. I am showing images directly from my own sub-domain web hosting server. So all the image is stored in my hosting panel. My hosting panel supports PHP web hosting and has MySQL database. To manage MySQL database we have to use PhpMyAdmin control panel. I am using MySQL database in my current tutorial. So open your hosting control panel and locate to PhpMyAdmin control panel. You could select already created MySQL database or create a new database like i did in below screenshot.

2. After we select the database, we have to create a new Table in MySQL database. The table name is Flowers_Name_List with 3 Columns and hit the Go button.

3. We have to create 3 Columns in table named as id, flower_name and flower_image_url. The id datatype should be in integer and and flower name and flower image url should be in Varchar datatype. One more thing the id should be set as Auto Increment with Primary key. After done setting up hit the Save button.

4. Table structure should look like below screenshot after done saving.

5. Now i am uploading few image on my domain hosting server and Storing the Image complete URL with Image name in MySQL database table manually. Screenshot of Table after entering records.

2. Creating PHP Script to Convert all flowers name and flowers URL in JSON format:

1. We have to create a .php extension file named as getFlowersList.php .

Complete source code for getFlowersList.php file.

2. We are uploading getFlowersList.php file on our hosting server web space. Our hosting space is connected with a sub-domain name flutter-examples.000webhostapp.com . After uploading the file on server complete file path is https://flutter-examples.000webhostapp.com/getFlowersList.php . If you execute the URL in your web browser window the you will see the complete JSON like below screenshot. We will use this URL in our flutter project.

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

1. The http.dart package is one of the most usable package file for flutter applications. http package is used to send data between online hosting server and client. The http.dart package did not come inbuilt with flutter project so we have to manually configure the package for our server. So open your project’s pubspec.yaml file present in your project’s root folder.

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 done saving file, We have to open our flutter project folder in Command Prompt or Terminal and execute flutter pub get command. This command will download the newly added packages in flutter project.

Here you go now all the configuration part is done. It’s time to start coding for app.

4. Start Coding for Flutter 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 MyApp class here.

3. Create our main Root view class named as MyApp extends StatelessWidget. In this class we would call the JsonImageList() class.

4. Create a class named as Flowerdata. In this class we would create 3 variable named as id, flowerName and flowerImageURL. The id variable should be integer type and other two variables is in String type. This class is used to extract data from JSON data one by one for JSON parsing purpose. The object values should be same as the JSON items name to populate them.

5. Create a class named as JsonImageList extends StatefulWidget. In this class we would create the createState() method with our main ListView class. This method would enable the mutable state management in given class tree.

6. Create another class named as JsonImageListWidget extends State. This would be our main Widget ListView class.

7. Create a Sting variable named as apiURL and assign the API URL to it.

8. Create a Future function named as fetchFlowers() ASYNC function. This function is our main function in which we would parse the JSON using Flowerdata class.

9. Create a function named as selectedItem() with Context and holder parameter. This method will be called when user selects any ListView item and print the selected item in Alert dialog box.

10. Creating Widget build are in JsonImageListWidget class. Inside the Widget build area we would first Show the CircularProgressIndicator() widget on data loading and hide the CircularProgressIndicator after done data loading. Now we would make the ListView widget and create the complete Item view . Inside the Item view we would put a Image and Text Widget. The Image widget is used to show the flower image and Text widget is used to show the flower name.

11. Complete source code for main.dart file:

Screenshots:

Flutter Custom JSON ListView with Images & Text Android iOS Example Tutorial

2 Comments

  1. hi, can you help if images are in BLOB

  2. hello admin, can it build a code for image upload from users to mysql server with like this flutter and php code type?

Leave a Reply

Your email address will not be published.