Chapter 3: How Navigation Works Between Screens (*.dart files) in Flutter Web

---

Introduction

Traditional web applications navigate between different HTML files, causing full-page reloads. In contrast, Flutter Web operates within a single HTML page, dynamically updating the UI without reloading the browser.

Flutter Web’s navigation system works differently from traditional routing. Instead of multiple HTML pages, each screen in Flutter Web is a separate Dart file (widget) that is managed in memory. This ensures seamless navigation without unnecessary reloading, making Flutter apps feel fast and native-like.

In this chapter, we’ll explore how Flutter Web handles navigation and how screen transitions occur between Dart files.

---

1️⃣ How Flutter Web Navigation Differs from Traditional Web Navigation

In a traditional web application:

• Clicking a link loads a new HTML page from the server.

• The browser refreshes the entire page, resulting in slower transitions.

• Each page has a unique URL that can be bookmarked and shared.

In Flutter Web:

• Clicking a button does not reload the page; instead, Flutter updates the widget tree dynamically.

• Navigation happens within memory, improving speed and user experience.

• Browser URL changes dynamically, maintaining deep linking support.

This approach allows Flutter Web to function as a Single Page Application (SPA) while still providing URL-based navigation.

---

2️⃣ Managing Screens in Flutter Web (*.dart files)

Since Flutter Web does not use separate HTML pages, each screen in a Flutter app is represented as a Dart file containing a widget. These screens are managed through Flutter’s navigation system.

Example of Screens in a Flutter Web App:

A Flutter Web app typically consists of multiple Dart files for different screens:

/lib
  ├── main.dart          # Entry point of the application
  ├── home_page.dart     # Home screen
  ├── about_page.dart    # About screen
  ├── profile_page.dart  # Profile screen

Instead of loading different HTML files, Flutter switches between these Dart files dynamically using the Navigator API or go_router.

---

3️⃣ How Navigation Works in Flutter Web

Flutter Web uses two primary ways to handle navigation:

✅ A. Navigator API (Widget-Based Navigation)

Flutter’s built-in Navigator API maintains a stack of screens in memory.

• push() adds a new screen to the stack.

• pop() removes the current screen and returns to the previous one.

This approach is similar to mobile navigation but does not update the browser URL.

✅ B. go_router (URL-Based Navigation for Web)

Since Flutter Web requires proper URL handling, the go_router package provides browser-friendly navigation:

• Updates the browser URL without reloading the page.

• Supports browser back/forward button functionality.

• Allows deep linking (users can directly visit a specific screen via a URL).

go_router is the recommended approach for Flutter Web apps since it maintains URL consistency, making the app feel like a traditional web experience.

---

4️⃣ How Does URL-Based Navigation Work?

Unlike the Navigator API, which simply pushes and pops screens, go_router ensures the URL remains in sync with the application state.

Example of URL Changes in Flutter Web

With go_router, users can share links, bookmark pages, and use browser navigation buttons, making the experience similar to a traditional web application.

---

Conclusion

Flutter Web does not navigate using separate HTML pages. Instead, each screen is a Dart file managed within memory, ensuring smooth navigation without full-page reloads. By using go_router, Flutter Web apps can update the URL dynamically, allowing deep linking and proper browser navigation while maintaining the SPA experience.

In the next chapter, we will explore how Riverpod helps manage navigation state, ensuring that data persists across screen transitions. 🚀