This project guide was originally published on SRF Developer. Check out the blog for the full source code and assets.

Stop reading docs and start building.

The best way to learn Flutter isn’t to memorize widgets; it’s to build a real app. Today, we are building a Quiz App from scratch.

But we aren’t doing it the "easy" way. We are using GoRouter, the modern standard for navigation in Flutter.

🎯 What You Will Build

A multi-screen trivia app that features:

1. Welcome Screen: A clean entry point.
2. Quiz Screen: Dynamic questions with multiple-choice answers.
3. Score Screen: A final summary that receives data (the score) from the previous screen.

🛠️ Key Concepts We Cover

1. Why GoRouter?

The old Navigator.push is fine for prototypes, but GoRouter handles deep linking and web URLs much better.

// The Modern Way
GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => const WelcomeScreen(),
),
GoRoute(
path: '/quiz',
builder: (context, state) => const QuizScreen(),
),
],
);

2. Passing Data (State)

How do you pass the final score to the result screen? We will look at how to pass arguments cleanly through named routes.

// Passing the score '10' to the results page
context.go('/result', extra: 10);

🚀 The Challenge

I have provided the logic and the layout. Your job is to style it and make it your own.

👉 Get the Full Source Code & Tutorial Here