Flutter Apply Filter On JSON ListView Using PHP MySQL Show Selected Item

Filter functionality is used in nearly every mobile applications which has dynamic content. There are many types of filter functionality available in mobile apps. Today we are going to Flutter Apply Filter On JSON ListView Using PHP MySQL Show Selected Item on next activity screen. We are filtering all the record based on Record ID. So let’s get started 🙂 .

What we are doing in this project (Must Read):-

We are creating MySQL database on our online hosting server and then we would create a Table in MySQL database. Now we would enter some records in our MySQL table. We are using PHP scripting language to make server API which converts all the database data into JSON format which we would parse into our flutter ListView. We would Add Item click onPress event on ListView and on onPress event get the selected item ID and send the ID to next activity. In next activity we would again hit a web API created on our server and pass the ID along with it using post method. Now on the server API it will filter the record from MySQL table based on ID and returns us the Complete student record which we would parse into our flutter activity and show inside ListView.

Contents in this project Flutter Apply Filter On JSON ListView Using PHP MySQL Show Selected Item on Next Activity Screen in Android iOS Example Tutorial:

1. Creating MySQL Database with Table:

1. I am using my own sub-domain name flutter-examples.000webhostapp.com connected with web hosting. I am using MySQL database in current tutorial. So open your PhpMyAdmin control panel in your hosting panel because the MySQL database is hosted in PhpMyAdmin. Now create a new database or you can use your own already existed database like i did in below screenshot.

2. After done creating or selecting database you have to make a Table in it. So enter the table name as Student_Data with 4 Columns and press the Go button to create Table in selected database.

3. There are 4 column present 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. We are using Varchar datatype for other columns because it can store both integer and string characters. The length should be 255 and id should be set as Primary Key with Auto Increment. Hit the Save button.

4. After we save the Table. The table structure should look like below screenshot.

5. Our table is yet empty so we have to insert some records manually in our table. Click on the Insert button.

6. After we insert few records our table structure should look like below screenshot.

Here you go guys. Now our database part is done.

2. Creating Web API Using PHP Scripting Language:

1. We are using PHP to create Web API in our tutorial. We will create 3 .php extension files.

2. Creating a PHP file named as DatabaseConfig.php . This file will contain all the major database connection configration. You have to change all the details present in this file as per your Database configuration. After done making changes we have to upload this file into our hosting server.

3. Create a PHP file named as Students_List.php . Using this file we will convert all the MySQL database details into JSON Format. We would upload this file on hosting server using file manager. After done uploading the file the complete API URL will be flutter-examples.000webhostapp.com/getStudentInfo.php . We would use this URL in our flutter project.

Complete Source code for Students_List.php file:

Screenshot of JSON:

4. Create another PHP file named as GetStudent.php . We would also upload this file on our hosting server. In this file we would first receive the ID sent by flutter application and return only the selected record based on ID filter. After done uploading the file API URL will be flutter-examples.000webhostapp.com/filter/GetStudent.php .

Complete Source Code for GetStudent.php file:

Now the API creating part is finished.

3. Installing the http.dart package in our Flutter Project:

1. We are using the http.dart package in our flutter project to sent and receive data from server using Get and Post methods. So open your Flutter Project root folder and open pubspec.yaml file in code editor.

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

Complete Source code for my pubspec.yaml file:

3. After done saving the file we have to open the flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. This command will refresh the complete project and download the newly added package in current project.

4. Start Coding For Flutter App:

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

2. Create void main runApp() inbuilt function and here we would call our main MyApp class.

3. Creating our main MyApp class extends with State less widget. In this class we would call the MainListView class.

4. Create a class named as Studentdata. We would use this class to populate items from JSON coming from server one by one. We would make 4 variable named as studentID, studentName, studentPhoneNumber, studentSubject which would hold and populate items from JSON.

5. Create a class named as MainListView extends StatefulWidget. In this class we would make the createState() method and pass the child MainListViewState class along with it.

6. Create a class named as MainListViewState extends with State. This is our main First Screen for flutter application. In this class we would parse JSON from server using API URL and display the items into ListView.

7. Creating a String variable named as apiURL in MainListViewState. In this variable we would pass the web API URL.

8. Creating a function named as fetchStudents() In MainListViewState class. In this function we would fetch all the records from JSON.

9. Create a function named as navigateToNextActivity with 2 arguments Context and dataHolder in MainListViewState class. We would call this function on each ListView item click event so when app user clicks on the ListView item it would automatically navigate to next activity and send the Selected Item ID along with it.

10. Creating Widget Build Area in MainListViewState class. Now we would make the Future Builder widget and returns the ListView widget. We would also display the CircularProgressIndicator() widget while data is loading from server as Loader.

Complete Source code for MainListViewState class:

11. Create a class named as SecondScreenState extends StatefulWidget. In this class we would first receive the sent ID from previous activity and make the createState() method of State and pass the SecondScreen class name along with it.

12. Create a Class named as SecondScreen. This is our next screen where the selected ListView item record will displayed.

13. Create a String variable named as idHolder in SecondScreen class. Now we would make the Constructor of this class and pass the idHolder variable init. Using this method we can store the selected item ID in idHolder variable.

14. Create a String variable named as url in SecondScreen class. Here we would pass our filter record API URL.

15. Create a function named as fetchStudent() in SecondScreen class. In this function we would First store the ID into data variable with param. Now we would call the API URL and make the POST method and send the ID to server and in return server returns us the complete record based on ID.

16. Create Widget Build area in SecondScreen class. Now we would make the FutureBuilder widget with ListView return. We would also display the CircularProgressIndicator() widget on data loading time.

17. Complete source code for main.dart file:

Screenshots:

Flutter Apply Filter On JSON ListView Using PHP MySQL Show Selected Item

15 Comments

  1. Thanks for the amazing tutorial . is there anyway to auto update the list when a new record is added in mysql database

  2. Please i am getting this error and i dont really know what to do i am actually new in flutter please kindly help me out this the error message “NoSuchMethodError: The method ‘map’ was called on null.
    Receiver: null
    Tried calling:
    map(Closure:
    (Studentdata) => Column)

    And i have tested my API URL and it is able to display all my records in my database in json format. Thank you in advance

  3. thanks mas bro
    this is awesome tutorial

  4. thanks this one helped me

  5. hello please i’m getting an error, the list is not loading. its showing the progress bar. please i need help on it

    • Marc the list is not loading because on the server which I am using in current tutorial is expired. So all the data is lost. You have to manually configured all the data on your server then It will run.

  6. hello please, I’m getting an error, the list is not loading. it’s showing the progress bar. please

    • Anugrah the list is not loading because the URL is expired on my test hosting sever. If you use it with your URL it will work surely .

  7. May I ask the API URL is get from or need to create by ourselves?

Leave a Reply

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