Flutter
Published in

Flutter

Flutter web: Navigating URLs using named routes

👉 Update: Flutter’s new Navigation and Routing system is now available, and it is the preferred way to handle URLs in Flutter.

Named routes can be used to navigate between pages inside a Flutter mobile app, but they also work for URLs in Flutter web apps. This article explains how to add named routes to your app, and how you can customize them, to have pattern matching inside the routes.

Defining named routes

Named routes can be added to your application by defining them within the MaterialApp class. The MaterialApp.routes property contains a map listing each named route and its associated display widget. The MaterialApp.initialRoute property determines what route displays as the application starts. The initialRoute thus needs to be defined inside of the routes property. For example:

A good practice to keep your code organized is to put named routes inside static variables, for example, on the widgets themselves:

Next, refactor MaterialApp.routes with the named routes now defined as static variables:

Navigating between pages

To navigate from one page to another, simply push the named route to the navigator:

See a full interactive example of this on DartPad. If you build and run the application yourself for the web, you can also just type in /#/overview inside the web browser. This pushes the route named overview to the Navigator, and takes you to the OverviewPage widget, as you can see in the following GIF:

See full interactive example on DartPad.

Routing logic for dynamic URLs

You may need to address more complex scenarios then addressed here, such as having pattern matching inside the routes to allow for dynamic URLs. To extend this example, assume that you have many different articles on the overview page. For each article you want to be able to navigate directly via URLs:

/#/article/a-very-interesting-article
/#/article/newsworthy-news

To define named routes for all of the articles within the MaterialApp does not scale very well. For such dynamic cases you need to do something more custom. As of this writing, the stable channel of Flutter is at v1.12, and there is no simple way to do this, though there are plans to add support for more advanced routing with the new Navigator.

For now you can use an external package, for example the Fluro package provides more advanced routing. It gives you wildcard pattern matching in routes, as well as parsing for query strings in URLs. There are probably many other available packages, so please leave a comment with the name of your favorite.

If you are up for the challenge, you can also get dynamic routes by making use of the MaterialApp.onGenerateRoute property. Use this to write routing logic for when a named route is not inside of MaterialApp.routes.

For each route, define a Path with a RegEx pattern. If the named route matches the pattern, return the associated widget. Next, define the Path class to support that:

For the overview page and the home route, it is quite simple and looks similar to what you had before. The following example creates a RegEx pattern that matches a slug (lowercase letters with a dash) that is used to find the corresponding article:

All that remains is to create an onGenerateRoute function for MaterialApp. If the current named route (settings.name) is defined in the paths list, return the associated widget. Make sure to pass any named matches in the RegEx (in this example it is the slug). If no matches are found, simply return null, WidgetsApp.onUnknownRoute is called to handle such cases:

Make sure to define the onGenerateRoute function inside the MaterialApp class; you have implemented dynamic URLs with Flutter, using named routes! You can see a full interactive example on DartPad.

See full interactive example on DartPad.

Conclusion

Whether you choose to write your own custom logic for routes, or simply use the routes support that exists within MaterialApp, you get URL support by default with a Flutter app on the web, when using named routes. Implementing named routes can also ensure that you decouple the presentation logic from the routing logic, which leads to less code duplication.

Let me know in the comments what solution you use in your app, whether it is writing your own custom logic or using an external package.

Happy hacking!

--

--

--

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS, Android, web, and desktop. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Recommended from Medium

Microservice Architecture Vs Monolithic Architecture

Emacs and PlantUML for UML Diagrams — Academic Tools

How to start a new relationship with Scala after breaking up with Java

“My experience learning stacks in data structure”

Turning your professional chamber music group into rock stars

TOP 3 TRENDS FOR MOBILE APP DEVELOPMENT

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
Per Classon

Per Classon

Software Engineer 👨🏼‍💻

More from Medium

Flutter Image Uploader With App Permissions and Compression Using GetIt Services

How to build your own Flutter slide puzzle

Flutter Navigation with AutoRoute

Using Hive In Your Flutter Mobile Project