Chapter 1: Introduction to Single Page Applications (SPA) and Flutter Web
What is an SPA?
A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates content without reloading the page. Unlike traditional multi-page applications, SPAs enhance speed, performance, and user experience.
Does Flutter Web Follow the SPA Model?
Yes! Flutter Web operates as an SPA because:
It runs inside a single HTML page (
index.html).Navigation happens within a widget tree, not by loading new HTML files.
Only parts of the UI update dynamically as users interact with the app.
Browser URL updates without reloading (using
go_router).
Benefits of Flutter Web as an SPA:
✅ Faster performance (no unnecessary reloading).
✅ Works more like a native desktop app.
✅ Better for progressive web apps (PWA).
✅ Seamless browser back & forward navigation.
Chapter 2: Understanding the Flutter Widget Tree and Web Rendering
What is the Widget Tree?
Flutter’s Widget Tree represents the hierarchical structure of UI components. Every Flutter app consists of a tree of widgets, where:
Parent widgets contain child widgets.
The widget tree updates dynamically when state changes.
Flutter manages UI updates efficiently, avoiding unnecessary rebuilds.
How Does Flutter Web Render UI?
Flutter Web does not rely on standard HTML & CSS. Instead, it uses two different rendering engines:
A. CanvasKit (Skia Renderer)
Uses WebAssembly (WASM) to draw everything on a
<canvas>element.Best for complex UI, animations, and high-performance apps.
No traditional HTML elements (
<div>,<button>); everything is pixel-drawn.
B. HTML Renderer
Uses native HTML elements (
<div>,<span>,<input>).Best for SEO, accessibility, and simpler UIs.
Allows better text selection, form controls, and screen reader support.
Choosing the Right Renderer
| Feature | CanvasKit | HTML Renderer |
| Performance | ✅ High | 🔹 Moderate |
| Accessibility | ❌ Limited | ✅ Better |
| Animations | ✅ Best | ❌ Limited |
| SEO Support | ❌ No | ✅ Yes |
Flutter dynamically picks the best renderer based on performance needs.
Chapter 3: How Navigation Works Between Screens (*.dart files)?
Flutter Web Navigation vs. Traditional Web Navigation
Unlike traditional web apps where each page has an HTML file, Flutter Web handles navigation entirely within Dart files:
Screens are widgets (
HomePage.dart,DetailsPage.dart).Navigation does not reload the page.
The browser URL updates dynamically.
How Does Flutter Manage Navigation?
Flutter navigation works through the Navigator API or go_router: 1️⃣ Navigator API (Manages widget stack in memory).
2️⃣ go_router (Syncs URL & navigation state).
Chapter 4: How Riverpod Helps Manage Navigation State
What is Riverpod?
Riverpod is a state management library that helps persist app state across screens.
Why Use Riverpod for Navigation?
✅ Keeps state alive when switching screens.
✅ Prevents unnecessary UI rebuilds.
✅ Works well with deep linking and go_router.
Chapter 5: What is go_router? How Does it Change the URL?
What is go_router?
go_router is a declarative navigation package that syncs UI state with the browser URL.
Key Features of go_router:
Maintains SPA behavior (no page reloads).
Supports deep linking & bookmarking.
Handles nested navigation cleanly.
Works well with state management (Riverpod, Bloc, Provider).
Chapter 6: Does go_router Improve or Hurt Navigation?
✅ How go_router Helps:
Prevents unnecessary page reloads.
Improves back & forward button support.
Enables bookmarkable URLs.
Works great for Flutter Web & PWA apps.
❌ Potential Issues with go_router:
Improper state handling can cause unexpected navigation issues.
Browser history behavior must be configured correctly.
Conclusion
Flutter Web follows a Single Page Application (SPA) model, ensuring a smooth user experience by dynamically updating UI without reloading. The combination of go_router and Riverpod enables efficient navigation and state management, making Flutter Web apps feel like native desktop applications. 🚀