chapter seven

7 Flutter Routing In Depth

 

In this chapter:

  • Setting up named routes
  • Building routes on the fly
  • Using the Navigator
  • Custom page transition animations

When I was planning out this chapter, I was trying to answer the question "Why?", or "Who cares?". This is one of the standard questions the authors at Manning think about before writing a chapter. And, well, this time it was pretty easy to answer: everyone who doesn’t want to make an app with a single page. Thus, a chapter on routing.

Routing can be a real pain (but it shouldn’t have to be!). In the web world, I think the folks behind React Router nailed the solution. It’s easy to use, and it’s flexible. It matches the reactive and composable UI style of React.

According to their docs, they’re in the business of "dynamic routing", rather than static. Historically, most routing was declarative and routes were configured before the app rendered. The creators of React Router explained it well in their docs: "When we say dynamic routing, we mean routing that takes place as your app is rendering. Not in a configuration or convention outside of a running app." (reactrouter.com)

I’m talking about React Router right now because the mental-model needed for routing in Flutter is the same. And, to be candid, I didn’t know how to approach this topic, so I looked to people who are much smarter than me. (Thanks, React Router team).

7.1  Routing in Flutter

7.1.1  The Farmers Market app

7.1.2  The app source code

7.2  Declarative Routing and Named Routes

7.2.1  Declaring routes

7.2.2  MaterialDrawer widget and a the full menu

7.2.3  Highlight active route with RouteAware

7.3  Routing on the Fly

7.3.1  MaterialRouteBuilder

7.3.2  showSnackBar, showBottomSheet and the like

7.4  Routing Animations

7.5  Summary