A comprehensive, animated quiz widget package for Flutter with nigation, progress tracking, gradient backgrounds, and customizable styling.
Experience smooth animations, gradient backgrounds, auto-nigation, and completion feedback
Features showcased in the demo:
✨ Smooth slide and fade animations between questions 🎨 Beautiful gradient backgrounds with completion state changes 📊 Embedded progress tracking (2/5 format) 🚀 Auto-nigation after answer selection ↩️ Back button functionality 🎉 Green gradient completion feedback Features ✨ # 🎯 Multiple Choice Questions - Support for dynamic question and answer lists 🧭 Smart Nigation - Nigate between questions with embedded controls 📊 Progress Tracking - Visual progress indicator showing current question (e.g., 2/10) 🚀 Auto-Nigation - Automatic progression after answer selection with customizable delay 🔒 Answer Validation - Require answers before allowing progression ↩️ Flexible Nigation - Always allow going back to edit previous answers 📐 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 is completed ✨ Smooth Animations - Elegant slide and fade animations with fixed container 🎯 Rounded Ripples - Properly clipped ripple effects for radio buttons 📱 Mobile Optimized - Responsive design with proper overflow handling Installation #Add this to your package's pubspec.yaml file:
dependencies: animated_quiz_widget: ^1.0.3Then run:
flutter pub get Basic Usage # import 'package:flutter/material.dart'; import 'package:animated_quiz_widget/quiz_view.dart'; class MyQuizPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( constraints: BoxConstraints(maxWidth: 600), padding: EdgeInsets.all(16), child: QuizWidget( questions: [ QuizQuestion( id: 'q1', question: 'What is your forite programming language?', options: [ 'Dart/Flutter', 'JaScript/TypeScript', 'Python', 'Ja/Kotlin', ], ), QuizQuestion( id: 'q2', question: 'Which development approach do you prefer?', options: [ 'Native Development', 'Cross-platform', 'Hybrid', ], ), ], onQuizCompleted: (questions) { // Handle quiz completion print('Quiz completed!'); for (var question in questions) { print('${question.question}: ${question.selectedAnswer}'); } }, ), ), ), ); } } Advanced Usage # Custom Configuration with Gradients # QuizWidget( questions: myQuestions, config: QuizConfig( backgroundColor: Color(0xFF1E3A8A), cornerRadius: 16, padding: EdgeInsets.all(24), showProgressIndicator: true, requireAnswerToProgress: true, allowBackwardNigation: true, enableAutoNigation: true, autoNigationDelay: Duration(milliseconds: 1000), useGradientBackground: true, gradientColors: [ Color(0xFF1E3A8A), // Deep blue Color(0xFF3B4CCA), // Royal blue Color(0xFF1E3A8A), // Back to deep blue ], animationDuration: Duration(milliseconds: 300), ), onAnswerChanged: (question, answer) { print('Question ${question.id} answered: $answer'); }, onQuizCompleted: (questions) { _showResults(questions); }, ) Question Model Properties # QuizQuestion( id: 'unique_id', // Required: Unique identifier question: 'Your question?', // Required: The question text options: ['A', 'B', 'C'], // Required: List of answer options selectedAnswer: null, // Optional: Pre-selected answer ) // Check if answered bool isAnswered = question.isAnswered; 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 allowBackwardNigation bool true Allow going back to previous questions enableAutoNigation bool true Auto-nigate after answer selection autoNigationDelay Duration Duration(milliseconds: 800) Delay before auto-nigation useGradientBackground bool true Enable gradient backgrounds gradientColors List? 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 Nigation Behior # Embedded Controls: Progress indicator and back button are embedded within the quiz widget Auto-Nigation: Automatically moves to next question after answer selection (configurable delay) Forward Nigation: Only allowed if current question is answered (when requireAnswerToProgress is true) Backward Nigation: Always allowed via embedded back button (when allowBackwardNigation is true) 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 Visual Features # Gradient Backgrounds # Default State: Beautiful blue gradient background Completion State: Automatically changes to green gradient when last question is answered Customizable: Provide your own gradient colors via gradientColors property Animations # Fixed Container: The outer container stays fixed while content animates Smooth Transitions: Slide and fade animations between questions Rounded Ripples: Properly clipped ripple effects on radio button interactions Content Alignment: Left-aligned content for better readability Callbacks # onAnswerChanged #Called whenever a user selects an answer:
onAnswerChanged: (QuizQuestion question, String? answer) { print('Question ${question.id}: $answer'); // Se to database, analytics, etc. } onQuizCompleted #Called when the quiz is completed (last question answered):
onQuizCompleted: (List questions) { // All questions with their selected answers var results = questions.where((q) => q.isAnswered).toList(); print('Answered ${results.length} out of ${questions.length} questions'); // Show results dialog, nigate to results page, etc. _showResultsDialog(questions); } Styling Examples # Dark Theme with Custom Gradient # QuizConfig( useGradientBackground: true, gradientColors: [ Color(0xFF1a1a1a), Color(0xFF2d2d2d), Color(0xFF1a1a1a), ], textColor: Colors.white, questionTextColor: Colors.white, cornerRadius: 16, ) Light Theme (Solid Color) # QuizConfig( useGradientBackground: false, backgroundColor: Colors.white, textColor: Colors.black87, questionTextColor: Colors.black, cornerRadius: 12, ) Colorful Theme # QuizConfig( useGradientBackground: true, gradientColors: [ Colors.deepPurple, Colors.purple, Colors.deepPurple, ], textColor: Colors.white, questionTextColor: Colors.yellow, cornerRadius: 20, padding: EdgeInsets.all(24), ) Widget Architecture # QuizWidget (Fixed Container with Gradient Background) ├── Fixed Header │ ├── Progress Indicator (2/10) │ └── Back Button (if enabled) └── Animated Content Area └── AnimatedSwitcher (Question Transitions) └── AnimatedRadioColumn (Individual Questions) ├── Question Text (Bold, Left-aligned) └── Radio Options with Rounded Ripples 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 patternsTo 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 - see the LICENSE file for details.
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.