Flutter MCQ Quiz Widget 📝

A comprehensive, animated quiz widget package for Flutter with navigation, progress tracking, gradient backgrounds, and customizable styling

Features ✨

  • 🎯 Multiple Choice Questions - Support for dynamic question and answer lists
  • 🧭 Smart Navigation - Navigate between questions with embedded controls
  • 📊 Progress Tracking - Visual progress indicator showing current question (e.g., 2/10)
  • 🚀 Auto-Navigation - Automatic progression after answer selection with customizable delay
  • 🔒 Answer Validation - Require answers before allowing progression
  • 📐 Consistent Height - Maintains consistent widget height throughout the quiz
  • 🎨 Gradient Backgrounds - Beautiful gradient backgrounds with completion state changes
  • 🎉 Completion Feedback - Green gradient background when quiz isflutter completed
  • ✨ Smooth Animations - Elegant slide and fade animations with fixed container
  • 📱 Mobile Optimized - Responsive design with proper overflow handling

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_mcq_template: ^1.0.0

Then run:

flutter pub get

Basic Usage

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("MCQ Quiz Example")),
        body: MCQQuiz(
          questions: [
            Question(
              text: "What language is used by Flutter?",
              options: ["Dart", "Kotlin", "Swift", "Java"],
              correctIndex: 0,
            ),
            Question(
              text: "Who developed Flutter?",
              options: ["Google", "Apple", "Meta", "Microsoft"],
              correctIndex: 0,
            ),
          ],
          onCompleted: (score) {
            debugPrint("Quiz completed! Score: $score");
          },
        ),
      ),
    );
  }
}

Question Model Properties

class Question {
  final String text;          // Question text
  final List<String> options; // List of answer options
  final int correctIndex;     // Index of the correct answer

  Question({
    required this.text,
    required this.options,
    required this.correctIndex,
  });
}

Configuration Options

Property Type Default Description
backgroundColor Color Color(0xFF1E3A8A) Background color (used when gradients disabled)
textColor Color Colors.white Text color for options and UI elements
questionTextColor Color Colors.white Text color for question text
cornerRadius double 12 Corner radius for rounded edges
padding EdgeInsetsGeometry EdgeInsets.all(20) Internal padding of the widget
showProgressIndicator bool true Show/hide progress indicator
requireAnswerToProgress bool true Require answer before going to next question
allowBackwardNavigation bool true Allow going back to previous questions
enableAutoNavigation bool true Auto-navigate after answer selection
autoNavigationDelay Duration Duration(milliseconds: 800) Delay before auto-navigation
useGradientBackground bool true Enable gradient backgrounds
gradientColors List<Color>? null Custom gradient colors (uses default if null)
animationDuration Duration Duration(milliseconds: 300) Animation duration for transitions
questionFontSize double 20 Font size for question text
optionFontSize double 18 Font size for option text
  • Embedded Controls: Progress indicator is embedded within the quiz widget
  • Auto-Navigation: Automatically moves to next question after answer selection (configurable delay)
  • Progress Indicator: Shows current position (e.g., "2/10") in the top-left corner
  • Quiz Completion: Background changes to green gradient and triggers onQuizCompleted callback

Styling & Customization 🎨

You can customize:

  • Card styling: Background color, border radius, elevation

  • Option styling: Text color, font size, selection color

  • Progress indicator: Shows current position

Example:

MCQQuiz(
  questions: myQuestions,
  onCompleted: (score) {
    print("Quiz completed! Score: $score");
  },
)

Callbacks 🔔 onCompleted

onCompleted: (score) {
  print('Quiz finished! Score: $score');
  // Use _score to save or display results
}

Example App

Check out the example/ directory for a complete working example that demonstrates:

  • Multiple question types
  • Custom styling and gradients
  • Answer handling and results display
  • Responsive design patterns

To run the example:

cd example
flutter pub get
flutter run

Requirements

  • Flutter SDK: >=3.0.0
  • Dart SDK: ^3.4.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License.

Support

If you like this package, please give it a ⭐ on GitHub and a 👍 on pub.dev!

For issues and feature requests, please use the GitHub issue tracker.

Libraries

flutter_mcq_template