Overview:

I will guide you to Develop Quiz Application in Flutter Using API's. This is a very easy tutorial which is easily understandable. But before you follow this tutorial make sure you have a great knowledge in Flutter API. Like how to fetch data from API's. We will use the Get Concept in this App to show quizez in our Application. And than we detect the correct quiz Answer and also we will add Points feature in our Flutter Application.

Making Model Class for API:

Now we will create Model Class using API Response. First of all install the JSON to dart plugin in Android studio or VS code. Whatever you are using. Than right click on lib folder create a new Folder Name Model Class .Right click on Model Class folder and than use JSON to Dart Option once you click on JSON to DART a new window will pop up paste the API response here. After that click on setting and trun on all options give them a custom name and create it. This will be our Model class.

Fetching Quiz API in Flutter:

First of all you need Quiz API end point URL. So there are alot of free API's endpoints are available on google. Some are Paid and some are free. So it depends on you which API version you choose. Get the API End Point and than check this API endpoint in PostMan. Is this API is giving data when we fetch and also check the status code of the API. In mostly cases the Status code is 200. 
Do like this as showon in image.
 
Postman Site Image While Checking API Status

Write Code in Flutter App and Receive Data:

Time to write code in Flutter Application to fetch this API data. So we have to install one http dependencny which is available on Pub dev website. (Use the latest version) This Package is created by dart.dev. 

dependencies:
  http: ^1.1.0

Add this dependecny in PubSpec file and than save it. 
Open your App Home Screen. And before build method write this code to fetch API.

 // API JOB
  List<Model Class Name> _QUIZ_LIST = [];
  Future<List<MODEL CLASS NAME>> _getQuiz() async{

    final response = await
    http.get(Uri.parse("YOUR API ENDPOINT URL.."));

    var data = jsonDecode(response.body.toString());

    if(response.statusCode == 200){


      _QUIZ_LIST.clear();
      // Loop for adding data in List using  Model
      for(Map i in data){
       
        _QUIZ_LIST.add(MODEL CLASS NAME HERE.fromJson(i));
      }

      return _QUIZ_LIST;

    }else{
      return _QUIZ_LIST;
    }


  }

Explanation of Flutter API Fetching Code:

In the above code we are using http dependency to fetch the data from API. Let me explain how this code is working

Undetstand these Steps:

  • First of all make a list which is like our Model Class so pass the Model Class Name than give a name to your list and leave it empty.
  • Than Create a Future method and make it Async and the type of the Future method will be List and List be like Our Model Class.
  • Inside Future Method use http method and create a final response name variable and write this code http.get(Uri.parse("END POINT OF API")).
  • Inside the http.get enter your API END POINT URL.
  • Decode the Json Data of API. Make a variable with a name of data and than use JSON DECODE and decode the response of the API. 
  • Now all data of your API is available in your data variable if you want to check print the data variable and than check API data in your Console.
  • After that use IF ELSE conditional statements and check is response is 200 (I already mentioned 200 Status mean OK API IS WORKING).
  • Add all data in the List using FOR LOOP. Use the For Loop and Add the data in the LIST that we created. and than return this List. 

That's it now your API Enpoint hit Successfully time to show the Quizez in our Application UI. 

UI In Flutter Application to Show Quiz Question and Answer:

First of all create a Text widget in the center here we will show our Quiz Question.
Than After this Text Widget add some space using SizeBox and create three Text Buttons on these all buttons we will show the one Correct and Two Incorrect Answer's. So If user click on wrong option use Visibility Widget to hide and show. If answer is wrong show the red color button which indicates that user answer is wrong. If Answer is correct than simply show another color like Green which tell's the User that your Answer is correct.



So this is the simple UI for your Quiz Application. Enchance this design if you want to make it attractive it depends on you.

How to show the Called API Data in Flutter Widgets:

Use the Future Builder Method in your Flutter UI Design and Future method has one parameter which accept Future method so call the future parameter and give Future method in it. Then inside Future Builder Design your Application UI and show the Data from your List. Like if you want to show Quiz Question than simply use the List View Pass the Index and call the required data from API. This is very easy. Like this In the below code we are using LIST to show data.

child: Text(
"Author Name:"
+ _MOTIVATIOIN_QUOTE_LIST[index].a.toString()),