A Simpler Guide to Flutter Navigator 2.0: Part II

A Better Approach for Web

Lee Phillips
Geek Culture

--

Photo by Martin Vorel on LibreShot

Introduction

In part 1 of this guide, we migrated a simple 2 screen app to Navigator 2.0. In keeping it simple, we did the bare minimum to upgrade from Navigator 1.0, creating only a RouterDelegate and then using it in place of Navigator to make navigation request.

However, this approach misses out on some key benefits of Navigator 2.0. For example, the ability to sync the URL in the address bar to the current location of the app. This also prevents users from being able to enter a specific URL or follow a link to a specific page within our app, as seen below.

Note the URL in the address bar.

This obviously is not an ideal web experience. Therefore, we will update our app, taking further advantage of Navigator 2.0 to optimize the web experience for our users.

All code for this project can be found here. I encourage you to download it and follow along.

Upgrading Our Implementation

RouterDelegate

--

--

Lee Phillips
Geek Culture

Software engineer. Flutter fanatic. I am here to share knowledge & inspire others to create great experiences.