Build a Flutter MCQ Quiz App Using JSON

🧠 Build a Flutter MCQ Quiz App Using JSON from a URL (Beginner-Friendly Guide)

📄 https://varanasi-software-junction.github.io/vsjpictures/programmingquizone.json

This link can be used to load questions dynamically into your app. That way, you don’t need to hardcode anything.

📄 https://github.com/Varanasi-Software-Junction/HelloFlutter/blob/main/mcqquiz.dart

Code on GIT.

📍 By Champak Roy | Varanasi Software Junction

Have you ever wanted to build your own quiz app that fetches questions from the internet and works just like real exams? Whether you are a teacher, developer, or a student, this step-by-step tutorial will help you build an MCQ (Multiple Choice Questions) quiz app using Flutter and a JSON file hosted online.

In this blog post, you’ll learn:

🧩 What JSON is and why it's used
🔨 How to load JSON data from a URL
🎯 How to design a quiz screen with options
✅ How to track correct answers and display a score
📦 How to make the app clean and beginner-friendly

📦 What is JSON and Why Do We Use It?

JSON (JavaScript Object Notation) is a lightweight format for storing and transferring data. It's human-readable and easy to parse in any language.

[
  {
    "qno": 1,
    "question": "What is C?",
    "opa": "Programming Language",
    "opb": "A game",
    "opc": "A movie",
    "opd": "None of these",
    "correctanswer": "1"
  }
]

In the above:

opa, opb, opc, opd are the four options.
correctanswer refers to the correct option number ("1" for opa, "2" for opb, etc.).

🌐 Hosting JSON Online

We’ve hosted our question file at:

📄 https://varanasi-software-junction.github.io/vsjpictures/programmingquizone.json

This link can be used to load questions dynamically into your app. That way, you don’t need to hardcode anything.

📄 https://github.com/Varanasi-Software-Junction/HelloFlutter/blob/main/mcqquiz.dart

Code on GIT.

🚀 Setting Up Your Flutter Project

If you're new to Flutter, install it from flutter.dev. Then, create a new Flutter project:

flutter create quiz_app
cd quiz_app

✍️ Update `pubspec.yaml`

Add the HTTP package to fetch data from the internet:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.6

Then run:

flutter pub get

💡 Creating the Quiz App – Full Code Explanation

Paste the following code into lib/main.dart:

// Full Flutter code is the same as provided earlier

🧠 Explanation of Each Part

📥 Fetching JSON Data

We use http.get() to download the quiz data from the URL:

final response = await http.get(Uri.parse('https://...json'));

📦 Creating a Model Class

We define a class QuizQuestion to hold question data.

🎮 Displaying the Questions

We use a Column widget to show the question and four options as tappable containers. Feedback is shown by color:

✅ Green: Correct
❌ Red: Wrong

🧾 Scoring the Quiz

A variable _score keeps track of how many correct answers the user selects. At the end, we show the result screen.

🖼️ App Features

✅ Loads questions from an online source
✅ One-by-one question display
✅ Colored feedback for right/wrong answers
✅ Final score display at the end

📱 Screenshots

Quiz App Screenshot

🔚 Wrapping Up

You’ve now built a fully working Flutter Quiz App that fetches questions from an online JSON file! This is a powerful pattern used in real-world apps — from online tests to games.

🎁 What You Learned:

JSON basics
Loading remote data in Flutter
State management using setState
Building interactive UI in Flutter
Creating reusable components

🔗 GitHub & Download

You can find the full source code on GitHub:
➡️ github.com/varanasi-software-junction/flutter-quiz-app (link placeholder)

🙋 Need More?

Want to:

⏱ Add a timer?
📊 Add categories or difficulty levels?
💾 Save scores using SharedPreferences?

Let me know in the comments or contact me on WhatsApp! 📞

✒️ Author

👨‍💻 Champak Roy
Software Developer | Teacher | Blogger
Founder of Learning Sutras & Varanasi Software Junction
🎓 Follow me for tutorials on Flutter, Python, DSA, and web dev.