Flutter Navigator 2.0 made simple: VRouter

VRouter basics

  • routes is a list of VRouteElement
  • VWidget is a VRouteElement mapping a path to a widget .


A Simple Example

  • /books which displays the list of books
  • books/:title with :title being a path parameter being to be any string, and representing the name of a book.
  • /unknown which covers any unknown path

VRouter configuration

  • A VWidgetcan have stackedRoutes, this is useful to created the paths you want. Here the path :title does not start with / and it is a subroute of the path /books so the matched path is /books/:title
  • VRouteRedirector is a special type of VRouteElement which allows to redirect easily. Note that the path in composed of a path parameter since it starts with :which has a regExp specified in parentheses: .+ allows us to match anything.
  • context.vRouter allows you to access VRouter data such as the path parameter


Full code

Learn more

  • Change the default transition or specify specific transitions for specific routes
  • Nesting widgets (instead of stacking) by using another VRouteElement named VNester
  • Customize back button behavior
  • React to route changes (stop them, redirect, …)
  • Saving your widget state to restore it when the browser backward button is pressed




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

PSM 1 — S1_E5 (Scrum Artifacts)

Coding Reflections — Week 1

How To Talk to Your Boss About Honeycomb — Honeycomb

Two people facing each other. One person points to a piece of paper with a pen. Paper is on a desk along with laptop and cup.

Associated Domains

Is Computer Languages like Java and PHP learning taking over Human Languages Learning?

What’s is Dependency Injection (DI) ? How can I use Swinject framework to help me on this?

How to Unlearn Java

Azure DevOps Actions, Commands and Notifications now on Slack!

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


More from Medium

Flutter: Make ExpansionTile work as ExpansionPanelList.radio

What is Riverpod ? Hey guys, in this article I wanna talk quickly about Riverpod in Flutter!

How to use two different flutter versions on the same system

Google pay’s migration journey to Flutter!