Deep Linking for Flutter Web

In this article I will show you how to have proper URL navigation for your application. Open links to specific pages, protected routes and custom transitions.

There is a online demo here:

Here is the source code:

Setup #

Step 1 #

Step 2 #

Now we need to grab the url the user enters into the address bar.

It’s important to import the navigator as shown as this will have the conditional import for web compiling.

Step 3 #

Now let’s add the proper routing.

Notice how we removed the “home” field for MaterialApp. This is because the router will handle everything. By default we will go home on “/”

Step 4 #

Now let’s add multiple screens to put this to the test! Add the following folders and files.

Step 5 #

Now let’s tie into the browser navigation buttons! Update “lib/ui/home/screen.dart” with the following:

Step 6 #

These urls are great but what if you want to pass data such as an ID that is not known ahead of time? No worries!

Conclusion #

Dynamic routes work great for Flutter web, you just need to know what to tweak! This package uses a forked version of fluro for some fixes I added but once the PRs is merged you can just use the regular package. Let me know what you think below and if there is a better way I am not seeing!

Here is the final code:


Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖! For feedback, please ping me on Twitter.