A Flutter package for easily implementing Material Design navigation transitions.

Overview

Morpheus

Pub Actions Status

A Flutter package for easily implementing Material Design navigation transitions.

Examples

Parent-child transition

You can use MorpheusPageRoute to create a parent-child transition between two screens.

Parent-child gif

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.

Top-level gif

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);
          }
        },
      ),
    );
  }

}
Comments
  • Child always rebuilding on switch

    Child always rebuilding on switch

    Hi. Is there any way to persist the child's state? Every time I make the child switch, it is rebuilt again.

    I'm working with Statefull widgets and switching in a bottomNavigationBar. I even tried with the AutomaticKeepAliveClientMixin.

    Thanks (btw, I really like transitions, great work).

    opened by pblinux 3
  • Support for new Dart language version by fixing nullability issues

    Support for new Dart language version by fixing nullability issues

    Currently this library cannot be used on newer versions of Dart due to null safety improvements:

    Error: Cannot run with sound null safety, because the following dependencies
    don't support null safety:
    
    - package:morpheus
    2
    
    For solutions, see https://dart.dev/go/unsound-null-safety
    
    opened by thalescm 2
  • Expand from circular widget like FAB

    Expand from circular widget like FAB

    Hi how to use MorpheusPageRoute to create a radial expansion from a floating action button to the new screen? This feature is implemented in the package animations, but I prefer using your plugin. Thanks

    opened by freesailor 2
  • Pass arguments to screen

    Pass arguments to screen

    I got problem of send arguments with Morpheus. I got this error. How can I solve?

    immagine

    Code where I set up the Route is:

    immagine

    And here where I pass data to new screen:

    immagine

    And to get information of arguments I use this line: immagine

    question 
    opened by tiaxter 2
  • Support for GridViews/SliverGrids with the MorpheusPageRoute

    Support for GridViews/SliverGrids with the MorpheusPageRoute

    Currently the MorpheusPageRoute only supports ListViews, with only 1 item for each Row.

    It should also support GridViews, with multiple items per Row, having the animation first expand the item horizontally and then vertically.

    Thanks for the great work btw^^

    opened by leodr 2
  • Can't use the parent child transition, receiving assertion error in console.

    Can't use the parent child transition, receiving assertion error in console.

    Hi there,

    Whenever I try to use your package with the parent-child transition on a ListTile that opens up another page, the transition seems to start but whenever it finishes I'm getting a red screen and the following console log:

    ════════ Exception caught by widgets library ═══════════════════════════════════
    The following assertion was thrown building AnimatedBuilder(animation: Listenable.merge([AnimationController#d144d(⏭ 1.000; paused; for MorpheusPageRoute<dynamic>)➩ProxyAnimation, kAlwaysDismissedAnimation➩ProxyAnimation➩ProxyAnimation]), dirty, dependencies: [MediaQuery], state: _AnimatedState#243c9):
    'package:flutter/src/rendering/object.dart': Failed assertion: line 2259 pos 12: 'attached': is not true.
    
    
    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
    In either case, please report this assertion by filing a bug on GitHub:
      https://github.com/flutter/flutter/issues/new?template=BUG.md
    
    User-created ancestor of the error-causing widget was
        MaterialApp 
    lib/main.dart:12
    When the exception was thrown, this was the stack
    #2      RenderObject.getTransformTo 
    package:flutter/…/rendering/object.dart:2259
    #3      RenderBox.localToGlobal 
    package:flutter/…/rendering/box.dart:2257
    #4      MorpheusPageRoute._findRenderBox 
    package:morpheus/page_routes/morpheus_page_route.dart:86
    #5      MorpheusPageRoute.buildTransitions 
    package:morpheus/page_routes/morpheus_page_route.dart:150
    #6      _ModalScopeState.build.<anonymous closure> 
    package:flutter/…/widgets/routes.dart:652
    

    Any idea what could be wrong here?

    I am using the following code:

    class LocationActivityInformationPage extends StatelessWidget {
      final List<Location> locations;
      final String scroll;
      
      LocationActivityInformationPage(this.locations, this.scroll);
      
      @override
      Widget build(BuildContext context) {
        return SingleChildScrollView(
            padding:EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                    Card(
                    elevation: 3.0,
                    child: ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      key: PageStorageKey(this.scroll),
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: this.locations.length,
                      itemBuilder: (context, index) {
                        final _parentKey = GlobalKey();
                        return _renderlocation(context, this.locations, index, _parentKey);
                      }
                    )
                  )
              ]
            )
        );
      }
    
    Widget _renderlocation(BuildContext context, List<Location> locations, int index, GlobalKey key) {
        var result;
        result = ListTile(
          key: key,
          leading: _locationIcon(locations[index].image),
          title: _locationName(locations[index].name),
          subtitle: _locationCity(locations[index].city.name),
          onTap: ()=> _handleTap(context, key)
        );
        return result;
      }
    
    void _handleTap(BuildContext context, GlobalKey parentkey) {
        Navigator.of(context).push(MorpheusPageRoute(
          builder: (context) => LocationDetailsPage(),
          parentKey: parentkey,
        ));
      }
    

    I've been told this problem has to do with the following property: https://api.flutter.dev/flutter/foundation/AbstractNode/attached.html

    Could you please take a look at it?

    EDIT: Apparently this issue happens when you animate to a screen from a screen that has been pushed through navigation. So for example I have a screen that pushes a screen on top of it, and then I click on the ListTile inside that screen to navigate to the child screen of the ListTile.

    I'm trying to find a solution for it but can't figure out what I should be doing so far.

    opened by Simbaclaws 1
  • Kinda not working on Android 8.0

    Kinda not working on Android 8.0

    Hey, tnx for amazing plugin. Just one issue, I've tested on Android 9.0 and 8.0, on 9.0 everything is working as expected while on 8.0 there is no transition at all, or maybe the speed of transition is too fast(thats my opinion). I'm talking about parent-child transition. Tabview transition on 8.0 is working but its to fast.. What could be the cause? Tnx in advance

    opened by aleksandar-radivojevic 1
  • not able to go back on swipe

    not able to go back on swipe

    I'm using it with auto_route to generate routes

    here is the function I created to use with auto_route package:

    Widget morpheusTransition(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { final transitionSettings = MorpheusRouteArguments( // parentKey: parentKey, scrimColor: Colors.black45, borderRadius: BorderRadius.circular(20), transitionColor: context.theme.bottomAppBarColor, transitionToChild: true, scaleChild: true, ); return MorpheusPageTransition(context: context, animation: animation, secondaryAnimation: secondaryAnimation, child: child, settings: transitionSettings); }

    And this is how I'm using it: @CustomAutoRouter(transitionsBuilder: morpheusTransition) class $Router { @initial StartUpView startUpViewRoute; LoginView loginViewRoute; ..... }

    opened by ketanchoyal 0
  • Example for a nested page with back button and slide animation ?

    Example for a nested page with back button and slide animation ?

    Hello,

    I have been following the examples, but i would like to know if it's possible to have lower pages under the navigator in MorpheusTabView.

    If each of the pages in the tab view have a separate stack and persist the state, it's possible to have a page pushed only in that tab? Let's say that one of the MorpheusTabView tabs is settings. And I would like to push a names route /settings/locale only to the settings tab.

    This pushed route would have a back button in the top bar? After going to Profile and returning to settings, the navigated page would be there? It could be possible to add a custom animation to that named route? for example a slide-right?

    All this while keeping the bottom navigation bar, and also accepting params from the router.

    thanks

    opened by gsabater 0
Releases(v1.2.2+1)
  • v1.2.2+1(Sep 4, 2019)

  • v1.2.2(Sep 3, 2019)

    Changed

    • MorpheusTabView will only ignore a new child if it has the same key as the previous child.

    Fixed

    • Fixed issue where popping a MorpheusPageRoute that uses a parentKey would throw an exception.
    Source code(tar.gz)
    Source code(zip)
  • v1.2.1(Sep 2, 2019)

  • v1.2.0+6(Aug 30, 2019)

  • v1.2.0+5(Aug 30, 2019)

  • v1.2.0+4(Aug 29, 2019)

    Added

    • Added documentation for MorpheusPageRoute transitions.

    Changed

    • Improved MorpheusPageRoute bidirectional transition when there is no transition widget.
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0+3(Aug 26, 2019)

  • v1.2.0+2(Aug 26, 2019)

  • v1.2.0+1(Aug 26, 2019)

    Fixes

    • Fixed a bug where MorpheusPageRoute couldn't re-use the existing RenderBox and would throw an exception when popping a layer in the navigation stack.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Aug 26, 2019)

    Added

    • Added a new 'default' transition for situations where no parentKey has been provided (This wasn't possible before).
    • Added support for transitioning from Container and FloatingActionButton widgets.

    Changed

    • Changed the default MorpheusPageRoute transition duration from 500ms to 450ms.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Aug 21, 2019)

    Added

    • Improved documentation for MorpheusPageRoute.
    • Added the MorpheusRouteArguments class that can be passed as the arguments when pushing a named route.

    Changed

    • Changed the example to use named routes.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Jun 27, 2019)

  • v1.0.1(Jun 20, 2019)

  • v1.0.0(Jun 16, 2019)

    Changed

    • Changed all MorpheusPageRoute transitions so that they now should be more accurate to the Material Design guidelines.
    • Bidirectional MorpheusPageRoute transitions scales its child screen in the animation.

    Removed

    • Removed the shapeBorderTween parameter from MorpheusPageRoute. It has been replaced with a borderRadius parameter.
    • Removed the elevation parameter from MorpheusPageRoute.
    Source code(tar.gz)
    Source code(zip)
  • v0.8.1(Jun 9, 2019)

  • v0.8.0(Jun 3, 2019)

    Added

    • Added RouteSettings to MorpheusPageRoute.

    Changed

    • Changed MorpheusPageRoute's bidirectional transition so that the child screen is clipped instead of begin resized when animating.
    Source code(tar.gz)
    Source code(zip)
  • v0.7.1(Jun 3, 2019)

  • v0.7.0(Jun 3, 2019)

    Added

    • Added new tweens dedicated to vertical transitions in MorpheusPageRoute.
    • Added transitionToChild property to MorpheusPageRoute.
    • Added a brand new example of how to use the package.

    Changed

    • Changed MorpheusPageRoute's default transitionDuration from 550 to 500.
    Source code(tar.gz)
    Source code(zip)
Flutter Material Design Navigation Drawer Menu

navigation_drawer_menu Flutter Material Design Navigation Drawer Menu Navigation drawer is a common UI pattern for adaptive menus. The Material Design

Christian Findlay 9 Dec 12, 2022
Fast code and awesome design-ui for flutter navigation bar

Flutter-awesome-bottom-navigation-bar ??‍?? Fast code and awesome design-ui for flutter navigation bar ?? Getting Started # First you need to add flas

Hmida 20 Nov 22, 2022
Flutter Flows made easy! A Flutter package which simplifies navigation flows with a flexible, declarative API.

Flutter Flows made easy! Usage Define a Flow State The flow state will be the state which drives the flow. Each time this state changes, a new navigat

Felix Angelov 337 Dec 31, 2022
A flutter navigation package

Create By Me(Agalaba Ifeanyi Precious) go Navigate Navigate Like a pro from one Screen to another Using go navigate. go_Navigate provide you the abili

Agalaba Ifeanyi Precious 2 Oct 11, 2021
Transparent Android system navigation bar with Flutter and FlexColorScheme package.

Sysnavbar with FlexColorScheme Transparent Android system navigation bar with Flutter and FlexColorScheme. FlexColorScheme V4 Notice If you are using

Rydmike 12 Oct 21, 2022
A Flutter package for easy implementation of curved navigation bar

curved_navigation_bar pub package A Flutter package for easy implementation of curved navigation bar. Add dependency dependencies: curved_navigation

null 556 Dec 9, 2022
Elegant abstraction for complete deep linking navigation in Flutter

Flutter Deep Link Navigation Provides an elegant abstraction for complete deep linking navigation in Flutter. This package only provides deep linking

Dennis Krasnov 64 Dec 27, 2022
A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0 (Router). If you love Flutter, you would love declarat

Zeno Nine 20 Jun 28, 2022
A Flutter implementation of a customizable navigation bar with animations.

A heavily customizable bottom navigation bar with some animation modifiers.

null 1 Jun 17, 2022
flutter bottom navigation bat project

bottom_navigation A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Danushan Ravendran 3 Sep 23, 2021
Custom Bottom navigation bar on Flutter.

Intro Custom Bottom navigation bar on Flutter. The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font cu

Ihab Zaidi 2 Oct 8, 2021
Customized 🚀 Bottom Navigation Bar Using Flutter 🐦

Customized ?? Bottom Navigation Bar Using Flutter ??

AmirHossein Bayat 3 Dec 7, 2022
Flutter custom BottomBar Navigation Widget

bottom_bar_with_sheet ?? Non-standard way to use more space of screens in your application ?? ?? Custom bottom Sheet under Bottom Navigation Bar ?? ??

Stanislav Ilin 305 Dec 23, 2022
Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Riverpod navigation If you are interested in the motivation why the package was created and a detailed description of what problems it solves, read th

pavelpz 20 Dec 13, 2022
Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested routes.

Routemaster Hello! Routemaster is an easy-to-use router for Flutter, which wraps over Navigator 2.0... and has a silly name. Features Simple declarati

Tom Gilder 291 Jan 3, 2023
Persistent Bottom Navigation Bar

Persistent Bottom Navigation Bar A persistent/static bottom navigation bar for Flutter. NOTE: Those migrating from pre 2.0.0 version should check the

Bilal Shahid 421 Dec 20, 2022
A bottom navigation bar that you can customize with the options you need, without any limits.

Bottom Personalized Dot Bar A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the a

null 103 Oct 20, 2022
A Custom Extended Scaffold with Expandable and Floating Navigation Bar

Custom Extended Scaffold Custom Flutter widgets that makes Bottom Navigation Floating and can be expanded with much cleaner a

Ketan Choyal 139 Dec 10, 2022
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.

Languages: English (this file), Indonesian, Urdu, Chinese, Brazilian Portuguese, Spanish, Russian, Polish, Korean, French. About Get Installing Counte

Jonny Borges 8k Jan 8, 2023