Skip to content
Related Articles

Related Articles

Improve Article
Basic Quiz App In Flutter API
  • Difficulty Level : Hard
  • Last Updated : 22 Jun, 2021

Flutter API is an open-source software development kit for building beautiful UI which is natively compiled. Currently, it is available is a stable version for IOS and Android OS.

In this app we are going to have the features or modules mentioned below:

  • Five multiple-choice questions ( more questions can be added ).
  • Four selectable options for each question in the form of buttons except the last one.
  • The score will be calculated based on the option selected for each question (Internally).
  • And based on the final score a remark will be shown at the end of the quiz in addition to the score and restart button.
  • There are two screens in the app home ( were questions will be shown) and result screen ( where score and remark will be shown).
  • The whole app will be separated into five different modules namely main.dart, question.dart, answer.dart,quiz.dart and reslut.dart.

Making this app will give you a good revision of flutter and dart basics. As we are covering a lot of concepts such as:

  • Showing Widgets on the screen.
  • Recycling Widgets.
  • Changing Screens.
  • Internal Logic
  • and else.

To start making the app we first have to create a flutter project which will give us many files and folders. In the Lib folder, there is a main.dart file already present. And now in the same folder rest, four files should be created:- 

  • question.dart
  • answer.dart
  • quiz.dart and
  • result.dart

Step 1: In step one we are going to



  • Create MyApp class and make it stateful.
  • Add questions for the home screen.
  • Create a widget tree for the home screen.

Starting with the main.dart file

Dart




import 'package:flutter/material.dart';
 
import './quiz.dart';
import './result.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}
 
class _MyAppState extends State<MyApp> {
  final _questions = const [
    {
      'questionText': 'Q1. Who created Flutter?',
      'answers': [
        {'text': 'Facebook', 'score': -2},
        {'text': 'Adobe', 'score': -2},
        {'text': 'Google', 'score': 10},
        {'text': 'Microsoft', 'score': -2},
      ],
    },
    {
      'questionText': 'Q2. What is Flutter?',
      'answers': [
        {'text': 'Android Development Kit', 'score': -2},
        {'text': 'IOS Development Kit', 'score': -2},
        {'text': 'Web Development Kit', 'score': -2},
        {
          'text':
              'SDK to build beautiful IOS, Android, Web & Desktop Native Apps',
          'score': 10
        },
      ],
    },
    {
      'questionText': ' Q3. Which programing language is used by Flutter',
      'answers': [
        {'text': 'Ruby', 'score': -2},
        {'text': 'Dart', 'score': 10},
        {'text': 'C++', 'score': -2},
        {'text': 'Kotlin', 'score': -2},
      ],
    },
    {
      'questionText': 'Q4. Who created Dart programing language?',
      'answers': [
        {'text': 'Lars Bak and Kasper Lund', 'score': 10},
        {'text': 'Brendan Eich', 'score': -2},
        {'text': 'Bjarne Stroustrup', 'score': -2},
        {'text': 'Jeremy Ashkenas', 'score': -2},
      ],
    },
    {
      'questionText':
          'Q5. Is Flutter for Web and Desktop available in stable version?',
      'answers': [
        {
          'text': 'Yes',
          'score': -2,
        },
        {'text': 'No', 'score': 10},
      ],
    },
  ];
 
  var _questionIndex = 0;
  var _totalScore = 0;
 
  void _resetQuiz() {
    setState(() {
      _questionIndex = 0;
      _totalScore = 0;
    });
  }
 
  void _answerQuestion(int score) {
    _totalScore += score;
 
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
    print(_questionIndex);
    if (_questionIndex < _questions.length) {
      print('We have more questions!');
    } else {
      print('No more questions!');
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Geeks for Geeks'),
          backgroundColor: Color(0xFF00E676),
        ),
        body: Padding(
          padding: const EdgeInsets.all(30.0),
          child: _questionIndex < _questions.length
              ? Quiz(
                  answerQuestion: _answerQuestion,
                  questionIndex: _questionIndex,
                  questions: _questions,
                ) //Quiz
              : Result(_totalScore, _resetQuiz),
        ), //Padding
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ); //MaterialApp
  }
}

In Flutter main.dart file is the entry point from which the code starts executing. In the main.dart file firstly material design package has been imported in addition to quiz.dart and result.dart . Then a function runApp has been created with parameter as MyApp. After the declaration of class MyApp which is a stateful widget, the state of class MyApp has been laid out. Now that is followed by the four questions along with their respective answer options & score. And at the end, we have the widget tree for the home screen, which shows the appBar with title, body with the questions and options. At the last, the debug banner has been disabled. We have classes like Quiz or Result, that will be defined in the following pages.

Step 2: In step two we will create

  • Class Quiz (used in the home screen)
  • Widget tree for class Quiz

quiz.dart

Dart




import 'package:flutter/material.dart';
 
import './answer.dart';
import './question.dart';
 
class Quiz extends StatelessWidget {
  final List<Map<String, Object>> questions;
  final int questionIndex;
  final Function answerQuestion;
 
  Quiz({
    @required this.questions,
    @required this.answerQuestion,
    @required this.questionIndex,
  });
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Question(
          questions[questionIndex]['questionText'],
        ), //Question
        ...(questions[questionIndex]['answers'] as List<Map<String, Object>>)
            .map((answer) {
          return Answer(() => answerQuestion(answer['score']), answer['text']);
        }).toList()
      ],
    ); //Column
  }
}

This is the quiz.dart which was already imported in the main.dart file. In this file the class Quiz is being defined which is used in the main.dart file. Class Quiz has been extended as stateless widget as it need not change any time in the run cycle of the app, which is followed by constructor Quiz. Then we have the widget tree that defines the structure of the class Quiz which is basically the questions and their options. Again we have the class Question which will be defined in the question.dart file.

Step 3: In step three we will create



  • Class Question (again used in the home screen)
  • Widget tree for the class Question

question.dart

Dart




import 'package:flutter/material.dart';
 
class Question extends StatelessWidget {
  final String questionText;
 
  Question(this.questionText);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(10),
      child: Text(
        questionText,
        style: TextStyle(fontSize: 28),
        textAlign: TextAlign.center,
      ), //Text
    ); //Container
  }
}

This question.dart file has already been imported into the quiz.dart file, which uses the class Question. The class Question would be a stateless one as similar to the Quiz it needs not change in the run cycle. Then we have the constructor Question which is followed by the widget tree that gives structure to the Question widget.

Step 4: In step four we will create

  • Class Answer (used in the home screen)
  • Widget tree for class Answer

answer.dart

Dart




import 'package:flutter/material.dart';
 
class Answer extends StatelessWidget {
  final Function selectHandler;
  final String answerText;
 
  Answer(this.selectHandler, this.answerText);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: RaisedButton(
        color: Color(0xFF00E676),
        textColor: Colors.white,
        child: Text(answerText),
        onPressed: selectHandler,
      ), //RaisedButton
    ); //Container
  }
}

This answer.dart file was also imported in the quiz.dart file. This file contains the Answer class which was uses in the quiz.dart file. Again similar to Quiz and Question class Answer would also be stateless.  In the class Answer function, selectHandelr and string answerText have been passed using the keyword final as they belong to stateful widget and hence need to specified immutable and not doing so will result in a dart analysis warning. That is followed by the constructor and the usual widget tree to give it a structure.

Step 5: In the last step we will create

  • Class Result for (result screen)
  • Remark logic
  • Class Result widget tree

result.dart

Dart




import 'package:flutter/material.dart';
 
class Result extends StatelessWidget {
  final int resultScore;
  final Function resetHandler;
 
  Result(this.resultScore, this.resetHandler);
 
  //Remark Logic
  String get resultPhrase {
    String resultText;
    if (resultScore >= 41) {
      resultText = 'You are awesome!';
      print(resultScore);
    } else if (resultScore >= 31) {
      resultText = 'Pretty likeable!';
      print(resultScore);
    } else if (resultScore >= 21) {
      resultText = 'You need to work more!';
    } else if (resultScore >= 1) {
      resultText = 'You need to work hard!';
    } else {
      resultText = 'This is a poor score!';
      print(resultScore);
    }
    return resultText;
  }
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            resultPhrase,
            style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ), //Text
          Text(
            'Score ' '$resultScore',
            style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ), //Text
          FlatButton(
            child: Text(
              'Restart Quiz!',
            ), //Text
            textColor: Colors.blue,
            onPressed: resetHandler,
          ), //FlatButton
        ], //<Widget>[]
      ), //Column
    ); //Center
  }
}

This result.dart file had been imported in the main.dart file already as the class Result is defined in this file. Class result will not change in the app run cycle therefor it is a stateless widget. As subclasses or variables which are used in the stateful widget needs to be made immutable keyword final has been used, it is followed by the Result keyword. After that, we have the resulting logic which decided which remark would be shown after the quiz bases on the final score. And at last, we have the widget tree that defines the structure of the class Result.

And now after completing the result.dart file our basic quiz app is completed now. We can preview the app in any physical device or emulator or even in the browser. It should look something like this.

After the app has been finalized, apk for the app can be generated by giving the command ‘flutter build apk’ in the terminal.




My Personal Notes arrow_drop_up
Recommended Articles
Page :