Get Started

1. Set up your routes

You can use an enum, make a few sealed classes, or both. This doesn't matter. A recommended and simple way is to get started with enums. Override a builder function to link your nodes and widgets. Optionally, set up a "title" field for any route.

enum Routes with OctopusRoute {
  home('home', title: 'Home'),
  gallery('gallery', title: 'Gallery'),
  picture('picture', title: 'Picture'),
  settings('settings', title: 'Settings');

  const Routes(this.name, {this.title});

  @override
  final String name;

  @override
  Widget builder(BuildContext context, OctopusState state, OctopusNode node) =>
      switch (this) {
        Routes.home => const HomeScreen(),
        Routes.gallery => const GalleryScreen(),
        Routes.picture => PictureScreen(id: node.arguments['id']),
        Routes.settingsDialog => const SettingsDialog(),
      };
}

Example

2. Create an Octopus instance

Create a router instance. During main initialization or at state of root App widget. To do so, pass a list of all possible routes. Optionally, set a defaultRoute as a route by default.

router = Octopus(
  routes: Routes.values,
  defaultRoute: Routes.home,
);

Example

3. Pass configuration

Add configuration from Octopus.config to the WidgetApp.router constructor.

MaterialApp.router(
  routerConfig: router.config,
)

Example

That's all.