MorpheusPageRoute

MorpheusPageRoute

MorpheusPageRoute is used to create a Material Design parent-child transition.

Basic usage

This is an example of the most basic use of MorpheusPageRoute, this involves no named routes or other, more complicated navigating.

The first thing you should do is define your parent widget. This is the widget from which the transition will originate. If the transition doesn't have a parent widget, it can't accurately display a parent-child transition.

To inform MorpheusPageRoute of your parent widget you will need to pass it a GlobalKey through the parentKey parameter. The key should also be the key of your designated parent widget.

Example

final GlobalKey parentKey = GlobalKey();

ListTile(
  key: parentKey,
  title: Text('Post'),
  onTap: () => Navigator.of(context).push(MorpheusPageRoute(
      builder: (context) => Post();
      parentKey: parentKey,
    )),
);

Named routes

When using named routes you'll have to do things a bit differently. Let's say you define your routes like this:

MaterialApp(
  // ...
  routes: {
    '/': (context) => Home(),
    '/post': (context) => Post(),
  },
);

Immediately there is a problem here, the PageRoute can't be defined.

Instead, the routes have to be defined like this:

MaterialApp(
  // ...
  onGenerateRoute: (RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MorpheusPageRoute(
            builder: (context) => Home(),
            settings: settings,
        );
      case '/post':
        return MorpheusPageRoute(
            builder: (context) => Post(),
            settings: settings,
        );
    },
  },
);

Now there's another problem. If you don't want to store the GlobalKeys globally, there's no way to provide them when pushing a route.

Instead you'll have to define the parentKey and other properties in the route arguments when pushing like this:

final GlobalKey parentKey = GlobalKey();

ListTile(
  key: parentKey,
  title: Text('Post'),
  onTap: () => Navigator.of(context).pushNamed('/post', arguments: MorpheusRouteArguments(
      parentKey: parentKey,
    )),
);

If you want to provide more data through route arguments you can extend the MorpheusRouteArguments like this:

class PostRouteArguments extends MorpheusRouteArguments {
  PostRouteArguments({
    GlobalKey parentKey,
    this.id,
  }) : super(parentKey: parentKey);

  final int id;
}

// ...

final GlobalKey parentKey = GlobalKey();

ListTile(
  key: parentKey,
  title: Text('Post'),
  onTap: () => Navigator.of(context).pushNamed('/post', arguments: PostRouteArguments(
      parentKey: parentKey,
      id: 183,
    )),
);