Thread by @biz84

When using GoRouter for declarative navigation, you'll often have to choose between:

- GOING to a route
- PUSHING a route

What is the difference between the two?

A thread. 🧵

To start off, let's consider a simple route hierarchy made of one top route with two sub-routes.

Let's also define 3 pages for our routes:

Now, suppose that we're in the HomeScreen.

From here, we can either call `context.go('/detail')` or `context.push('/detail')`, and end up with the same result.

That is, in both cases we'll have two routes in the navigation stack (home → detail).

From the detail page, we can now call `context.go('/modal')` or `context.push('/modal')`.

This time the result is different:

- If we use "go", we end up with the modal page on top of the *home* page
- If we use "push", we end up with the modal page on top of the *detail* page

That's because "go" jumps to the target route (/modal) by *discarding* the previous route (/detail), since /modal is *not* a sub-route of /detail.

Meanwhile, "push" always adds the target route on top of the existing one, preserving the navigation stack.

This means that once we dismiss the modal page, we navigate back to:

- the home page, if we used "go"
- the detail page, if we used "push"

Here's a short video showing this behavior:

The bottom line?

Think of `go` as a way to *jump* to a new route. This will modify the underlying navigation stack if the new route is not a sub-route of the old one.

On the other hand, `push` will always push the destination route on top of the existing navigation stack.

For more info about GoRouter, make sure to check the official documentation (it's excellent):

gorouter.dev

I'll cover GoRouter extensively in my upcoming Flutter course, along with many other important topics.

If this is of interest, you can sign up today to secure a big discount when the course goes live. 👇

codewithandrea.com/courses/comple…

Happy coding!