↓






Flutter Quiz Explained

Champak Roy May 21, 2025
 

Build a Simple True/False Quiz App Using Flutter – Step-by-Step Guide

By Champak Roy | Learning Sutras

Flutter is a fantastic framework to build cross-platform apps with beautiful UI. In this blog post, we’ll walk through building a basic True/False Quiz App using Flutter, ideal for beginners learning stateful widgets, user interaction, and UI updates.

What We’re Building

A quiz app where:

  • Questions appear one at a time.
  • The user selects True or False.
  • The app checks the answer and shows correct or incorrect status.
  • At the end, the total score is displayed.

Concepts Covered

  • StatefulWidget and setState
  • Handling button clicks
  • Dynamic UI updates
  • Score tracking with visual indicators
  • Layout widgets like Column, Row, Expanded, and Padding

Full Code (Explained Step-by-Step)

1. Scaffold and AppBar Setup


import 'package:flutter/material.dart';
void main() => runApp(VSJQuizApp());

class VSJQuizApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.teal,
              title: Text(
                "Quiz App",
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              centerTitle: true,
            ),
            backgroundColor: Colors.grey.shade900,
            body: VSJQuiz(),
          ),
        ),
      ),
    );
  }
}

2. Managing Quiz Logic with StatefulWidget


class VSJQuiz extends StatefulWidget {
  @override
  _VSJQuizState createState() => _VSJQuizState();
}

3. Question Model Class


class Question {
  String question = "";
  bool correctAnswer = false;

  Question(this.question, this.correctAnswer);
}

4. Adding Questions and Variables


List<Question> questions = [
  Question("C is a programming language? T/F", true),
  Question("C++ is not an object oriented language.. T/F", false),
  Question("Python has dictionary.. T/F", true),
  Question("Hukulganj is the capital of Japan T/F", false)
];

String currentquestiontext = "Press any button to start the quiz";
int questionno = -1;
int correctanswers = 0;
bool isTestOver = false;
List<Widget> scores = [];
Question? currentquestion;

5. Logic to Update Questions


void setQuestion(bool b) {
  if (isTestOver) return;

  if (questionno == -1) {
    questionno++;
    currentquestion = questions[questionno];
    currentquestiontext = currentquestion!.question;
    return;
  }

  if (questionno >= questions.length - 1) {
    addResult(b);
    currentquestiontext = "Questions Over. Correct answers = $correctanswers";
    isTestOver = true;
    return;
  }

  addResult(b);
  questionno++;
  currentquestion = questions[questionno];
  currentquestiontext = currentquestion!.question;
}

6. Result Handling


void addResult(bool b) {
  bool iscorrect = b == currentquestion!.correctAnswer;
  if (iscorrect) {
    correctanswers++;
    scores.add(Text("Correct"));
  } else {
    scores.add(Text("Wrong"));
  }
}

7. Building the UI


@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
        flex: 5,
        child: Center(
          child: Text(
            currentquestiontext,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 25.0, color: Colors.white),
          ),
        ),
      ),

8. Adding Answer Buttons


ElevatedButton(
  style: ElevatedButton.styleFrom(primary: Colors.green),
  child: Text('True'),
  onPressed: () {
    setState(() {
      setQuestion(true);
    });
  },
),

ElevatedButton(
  style: ElevatedButton.styleFrom(primary: Colors.red),
  child: Text('False'),
  onPressed: () {
    setState(() {
      setQuestion(false);
    });
  },
),

9. Displaying Result Feedback


Wrap(
  spacing: 8.0,
  children: scores,
)

Suggested Improvements

  • Add a "Restart Quiz" button
  • Show question number (e.g., Q1 of 4)
  • Include progress bar or timer
  • Load questions from JSON or API

Summary

Feature Status
True/False Questions Done
Score Display Done
Dark Theme UI Done
Restart Button Not Yet
JSON Data Loading Not Yet

Final Thoughts

This project is a great way to learn how Flutter handles:

  • State management
  • Dynamic user interfaces
  • User interaction
  • Layout structuring

It's a perfect beginner project that you can build on to create more advanced quizzes.

What's Next?

 :

  • Restart feature
  • Timer support
  • Questions from JSON
  • Firebase integration
  • Radio Button Quiz

Thanks for reading! Happy Fluttering!

 


 

Post a Comment

0 Comments

Me
↑