Skip to content

Routemaster Flutter scenarios

Tom Gilder edited this page Jul 6, 2021 · 3 revisions

Routemaster is trying to support all the scenarios from this Flutter storyboard PDF.

Deep Linking - Path Parameters

Supported by providing :name in the path, this can then be read by the route from pathParameters:

'/feed/profile/:id': (routeInfo) => MaterialPage(
    child: ProfilePage(search: routeInfo.pathParameters['id']),
)

Deep Linking - Query Parameters

Routes are provided by query string values from queryParameters:

e.g. from route /search?query=hello+world:

'/search': (routeInfo) => MaterialPage(
    child: SearchPage(query: routeInfo.queryParameters['query']), // query is 'hello world'
)

Dynamic Linking

Supported by path parameters and dynamically generating routes on demand.

Skipping Stacks

Supported by pushing any deep stack path.

If the current route is /feed and you call this:

Routemaster.of(context).push('/profile/1/photo');

Then both the profile and photo pages are created and pushed.

Validation (Login/Logout/Sign-up Routing)

The easiest way to do this is by swapping out the routing table based on the app's state. There's an example of this in the example app.

This could also be done using the route validation system:

'/feed/profile/:id': (routeInfo) {
  return Guard(
    validate: (routeInfo) {
      return routeInfo.pathParameters['id'] == '1' ||
          routeInfo.pathParameters['id'] == '2';
    },
    onValidationFailed: (routeInfo, context) => Redirect('/feed'),
    child: MaterialPage(
      child: ProfilePage(
        id: routeInfo.pathParameters['id'],
        message: routeInfo.queryParameters['message'],
      ),
    ),
  );
},

...but I think swapping the route stack is by far the best and easiest option.

Nested Routing

This is easily supported via several tab pages, such as CupertinoTabPage:

'/': (routeInfo) => CupertinoTabPage(
      child: HomePage(),
      paths: ['feed', 'search', 'notifications', 'settings'],
    ),

See HomePage from the example app of how pages can use this.

Custom animations

Supported by providing a custom Page. See FancyAnimationPage in routes.dart for an example.