A Flutter package for easily implementing Material Design navigation transitions

morpheus

a flutter package for easily implementing material design navigation transitions.

examples for easily implementing

parent-child transition

you can use morpheuspageroute to create a parent-child transition between two screens.

import 'package:morpheus/morpheus.dart';

class mylist extends statelesswidget {

  @override
  widget build(buildcontext context) {
    return listview.builder(
      itemcount: 10,
      itembuilder: (context, index) {
        final _parentkey = globalkey();
        return listtile(
          key: _parentkey,
          leading: circleavatar(child: text((index + 1).tostring())),
          title: text('item ${index + 1}'),
          ontap: () => _handletap(context, _parentkey),
        );
      }
    );
  }

  void _handletap(buildcontext context, globalkey parentkey) {
    navigator.of(context).push(morpheuspageroute(
      builder: (context) => scaffold(),
      parentkey: parentkey,
    ));
  }

}

top-level transition

you can use the morpheustabview widget to create a top-level transition when the child widget changes.

import 'package:morpheus/morpheus.dart';

class mytabscreen extends statefulwidget {

  @override
  _mytabscreenstate createstate() => _mytabscreenstate();

}

class _mytabscreenstate extends state<mytabscreen> {

  final list<widget> _screens = [
    scaffold(backgroundcolor: colors.green),
    scaffold(backgroundcolor: colors.red),
    scaffold(backgroundcolor: colors.blue),
  ];
  int _currentindex = 0;

  @override
  widget build(buildcontext context) {
    return scaffold(
      body: morpheustabview(
        child: _screens[_currentindex]
      ),
      bottomnavigationbar: bottomnavigationbar(
        currentindex: _currentindex,
        items: [
          bottomnavigationbaritem(
            icon: icon(icons.trending_up),
            title: text('trending'),
          ),
          bottomnavigationbaritem(
            icon: icon(icons.star),
            title: text('saved'),
          ),
        ],
        ontap: (index) {
          if (index != _currentindex) {
            setstate(() => _currentindex = index);
          }
        },
      ),
    );
  }

}