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:

https://rodydavis.github.io/flutter_deep_linking/

Here is the source code:

https://github.com/rodydavis/flutter_deep_linking

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: https://github.com/rodydavis/flutter_deep_linking

I am a cross platform dev. I am currently using Flutter, Firebase, SQLite, Google Cloud Platform, Docker and WebAssembly. I am exploring Rust, C++, Go, WebXR.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store