Navigator 2.0 Shell Route The Easy Way

Google recommends the Go Router package to use the navigator 2.0 API in flutter. But, the docs is a bit obtuse. Let me show you the easy way to implement navigator 2.0 with Go Router.

The Shared Scaffold

First, we need a shared scaffold. This is one from my own website folio that I am implementing:

The key part is to have a parameter that accepts a content child:

And:

And a typical screen is:

Now, we are ready to implement the navigation 2.0 pattern using Go Router.

Navigation 2.0 Go Router

The router usually can be implemented in the class where the MaterialApp.router declaration is made:

The way this works is that we pair some routers with a shared scaffold in the shell route declaration:

The Shell Route: