How to create a simple quiz app using flutter

Creating a simple quiz app using Flutter is a great beginner project — it’ll help you learn state management, navigation, and UI design. Let’s go step-by-step with a working example.

---

Overview

We’ll create a multiple-choice quiz app that:

• Shows one question at a time
• Lets the user select an answer
• Displays the final score at the end

---

Step 1: Create a New Flutter Project

In your terminal:

flutter create quiz_app
cd quiz_app

Then open the project in VS Code or Android Studio.

---

Step 2: Define a Quiz Model

Create a file: lib/question.dart

class Question {
  final String questionText;
  final List<String> answers;
  final int correctAnswerIndex;

  Question({
    required this.questionText,
    required this.answers,
    required this.correctAnswerIndex,
  });
}

---

Step 3: Add Some Questions

In lib/main.dart, add a list of questions:

import 'package:flutter/material.dart';
import 'question.dart';

void main() {
  runApp(const QuizApp());
}

class QuizApp extends StatelessWidget {
  const QuizApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Quiz App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const QuizPage(),
    );
  }
}

class QuizPage extends StatefulWidget {
  const QuizPage({super.key});

  @override
  State<QuizPage> createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  final List<Question> _questions = [
    Question(
      questionText: 'What is the capital of France?',
      answers: ['Berlin', 'Madrid', 'Paris', 'Rome'],
      correctAnswerIndex: 2,
    ),
    Question(
      questionText: 'Which planet is known as the Red Planet?',
      answers: ['Earth', 'Mars', 'Jupiter', 'Venus'],
      correctAnswerIndex: 1,
    ),
    Question(
      questionText: 'Who wrote "Romeo and Juliet"?',
      answers: ['Charles Dickens', 'William Shakespeare', 'Mark Twain', 'Homer'],
      correctAnswerIndex: 1,
    ),
  ];

  int _currentQuestionIndex = 0;
  int _score = 0;

  void _answerQuestion(int selectedIndex) {
    if (selectedIndex == _questions[_currentQuestionIndex].correctAnswerIndex) {
      _score++;
    }

    setState(() {
      _currentQuestionIndex++;
    });
  }

  void _restartQuiz() {
    setState(() {
      _currentQuestionIndex = 0;
      _score = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    bool quizFinished = _currentQuestionIndex >= _questions.length;

    return Scaffold(
      appBar: AppBar(title: const Text('Simple Quiz App')),
      body: Center(
        child: quizFinished
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Quiz Finished!\nYour score: $_score / ${_questions.length}',
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 22),
                  ),
                  const SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: _restartQuiz,
                    child: const Text('Restart Quiz'),
                  )
                ],
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    _questions[_currentQuestionIndex].questionText,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 20),
                  ),
                  const SizedBox(height: 20),
                  ..._questions[_currentQuestionIndex].answers
                      .asMap()
                      .entries
                      .map(
                        (entry) => ElevatedButton(
                          onPressed: () => _answerQuestion(entry.key),
                          child: Text(entry.value),
                        ),
                      ),
                ],
              ),
      ),
    );
  }
}

---

Step 4: Run the App

Run on an emulator or a real device:

flutter run

You’ll see a quiz where:

• You answer questions by tapping buttons.
• At the end, it shows your score and a restart button.

---

Optional Improvements

• Add animations between questions
• Use Provider or Riverpod for state management
• Load questions from a JSON file or API
• Add a progress bar