Getting started

Routemaster maps paths (URLs) to pages using a declarative routing map, like this:

final routeMap = RouteMap(
  routes: {
    '/': (routeData) => MaterialPage(child: PageOne()),
    '/two': (routeData) => MaterialPage(child: PageTwo()),
  },
);

This sets the root path of '/' to a MaterialPage with the child of PageOne. This is the default page shown when your app starts.

Here's how you pass the map on a MaterialApp on app startup:

void main() {
  runApp(
    MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routeMap),
      routeInformationParser: const RoutemasterParser(),
    ),
  );
}

Here's the app's first page:

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page one')),
      body: ElevatedButton(
        onPressed: () => Routemaster.of(context).push('two'),
        child: Text('Push page two'),
      ),
    );
  }
}

This shows the core of how to navigate, by calling Routemaster.of(context).push('path').

You can push relative or absolute URLs, like links in HTML. If the current route is /foo:

• .push('bar') navigates to /foo/bar.
• .push('/root') (note the initial slash) navigates to /root.

On the web, you might want to prevent going back to the previous page. You can do this by calling Routemaster.of(context).replace('path-name').

Parameters

There are two maps you can access to get path data: queryParameters for the query string, and pathParameters for the path itself.

Query parameters

You can get any query string parameters from the queryParameters map:

'/search': (routeData) => MaterialPage(
    child: SearchPage(
        searchQuery: routeData.queryParameters['query'],
    ),
)

Navigating to /search?query=hello will pass 'hello' to SearchPage.

Path parameters

You can use path parameters for dynamic paths. With this route map:

'/product/:id': (routeData) => MaterialPage(
    child: ProductPage(
        productId: routeData.pathParameters['id'],
    ),
)

Navigating to /product/123 will pass '123' to ProductPage.