Flutter Navigator 2.0 made simple: VRouter

Since it came out, the Navigator 2.0 API has been controversial. Many complained about its complicity and verbosity. This changes today with the introduction of a flutter package: vrouter

This article is up to date with VRouter ≥1.1

VRouter basics

VRouter is the widget handling the routing of your app. All you have to do is define the routes parameter to create your different routes:

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

Navigate

Navigation is the other side of the coin. Once your routes are defined, you want to be able to navigate programmatically.

A Simple Example

Now that you understood the basic, let’s build a simple app: the infamous book app from the medium article introducing Navigator 2.0.

The app is made of 3 routes:

• /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

As you can see, we just translate the different path we talk about.

Interesting things to note are:

• 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

Navigating

VRouterData holds every methods for the navigation as we saw, here we use push.

Note how we don’t start our path with /, which indicated that the given string should be appended to the current path to form the new url.

Also note how we have nothing to do for the pop event to be handled (when the appBar back button is pressed). This is because VRouter internally uses a specific algorithm to handle it, however this behavior could be overwritten.

Full code

Learn more

VRouter enable you to do way more than what we just saw, here are a few things which can easily be done:

• 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

To learn more about it, head over to vrouter.dev.