Example Project

A view router library for Flutter apps.

Features

Parses named routes and provides named parameters and query parameters as arguments for widget building.

Route	Config	Result
/	/	{name: '/', params: {}}
/items?item_id=123	/items	{name: '/items', params: {'item_id': '123'}}
/items/123	/items/:item_id	{name: '/items/123', params: {'item_id': '123'}}
/items/123?tab=details	/items/:item_id	{name: '/items/123', params: {'item_id': '123', 'tab': 'details'}}

Getting started

In your pubspec.yaml, add to your dependencies.

view_router:
  git:
    url: git://github.com/brookesb91/view_router.git

Basic Usage

Define your view routes.

import 'package:view_router/view_router.dart';

final Routes routes = {
  '/': (_) => HomePage(),
  '/items': (_) => ItemsPage()
};

Create a ViewRouter and add to your MaterialApp as the onGenerateRoute callback.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      onGenerateRoute: ViewRouter(routes),
      initialRoute: '/',
    );
  }
}

Navigate using the navigator.

Navigator.of(context).pushNamed('/profile');

Using Named Parameters

view is a convenience function for defining a builder with access to all named and query route parameters. View builders have the signature Widget Function(BuildContext, Widget Function(Map<String, String>))

final Routes routes = {
  // Home route
  '/': (context) => view(context, (_) => HomePage()),
  // List route
  '/items': (context) => view(context, (_) => ItemsPage()),
  // List item route
  // Named parameters are prefixed with a `:`.
  // The value with the specified name will be added to `params`.
  '/items/:item_id': (context) =>
    view(context, (params) => ItemPage(id: params['item_id']))
}

Navigating to a route with a named parameter.

Navigator.of(context).pushNamed('/items/${item.id}');

Using Query Parameters

final Routes routes = {
  // Home route
  '/': (context) => view(context, (_) => HomePage()),
  // `item_id` is satisfied by a query parameter if present.
  // eg. `/items?item_id=123`
  //
  // Widgets should allow for a nullable value and the UI
  // respond accordingly.
  '/items': (context) =>
    view(context, (params) => ItemsPage(selectedItemId: params['item_id']))
}

Navigating to a route with query parameters.

Navigator.of(context).pushNamed('/items?item_id=${item.id}');