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)
☀️ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Ayush Agarwal 652 Dec 30, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Mohammad Fayaz 202 Dec 11, 2022
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Jay Raj 2 Feb 18, 2022
PaperOnboarding is a material design slider made by @Ramotion

PAPER ONBOARDING Android library Paper Onboarding is a material design UI slider written on Java We specialize in the designing and coding of custom U

Ramotion 2.6k Dec 28, 2022
A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!

sliding_up_panel A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component,

Akshath Jain 1.2k Jan 7, 2023
Page Transition package for multiple navigation types

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

VAMSI KRISHNA THANIKANTI 1 Oct 29, 2021
Domain-Driven Design + Parse Server For FlutterDomain-Driven Design + Parse Server For Flutter

Domain-Driven Design + Parse Server Install Parse SDK on Flutter project and then update .env file PARSE_APPLICATION_ID=YOUR_APP_ID_HERE PARSE_CLIENT_

Long Hoàng 19 Nov 18, 2022
Beautiful-Login-Design - A design challenge made in flutter + custompainter

Login Design This little project was proposed in [Flutter & Dart en Español] gro

Juan Suarez 10 Nov 3, 2022
A light weight package for flutter apps, that easily shows a splash screen with a nice fade animation.

Animated Splash Screen Using the package Get the library environment: sdk: ">=2.1.0 <3.0.0" Add dependency in pubspec.yaml dependencies: animated_

Mohammad Fayaz 112 Oct 6, 2022
How to add a notification badge in bottom navigation bar

bottom_navigation_badge / BottomNavigationBadge BottomNavigationBadge is a Flutter class developed by westdabestdb. Getting Started Add this to your p

Görkem Erol 50 May 21, 2022
A Flutter widget that easily adds the flipping animation to any widget

flip_card A component that provides a flip card animation. It could be used for hiding and showing details of a product. How to use import 'package:fl

Bruno Jurković 314 Dec 31, 2022
A small splashscreen used as intro for flutter applications easily with a lot of customizations ❤️🥳

Splash Screen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization Currently Supported by awe

DPLYR 283 Dec 30, 2022
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

null 1.2k Jan 6, 2023
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
Best 6 Flutter Login Screen Design

Flutter Login Home Animation A new open-source Flutter project that enables the developer to quickly get started with the Flutter animation and applic

GeekyAnts 1.1k Dec 28, 2022
Login Page UI Design and Animation For Flutter

Flutter Beautiful Login Page UI Design and Animation - Day 14 class Afgprogramme

Behruz Hurramov 0 Dec 24, 2021
An advanced UI design implemented in Flutter

Flight search This is my second UI Challenge. I picked a Jhony Vino's Flight search design from 100 Mobile App UI Interactions and implemented it in F

Marcin Szałek 796 Dec 24, 2022
Cuberto is a leading digital agency with solid design and development expertise.

Cuberto's development lab: Cuberto is a leading digital agency with solid design and development expertise. We build mobile and web products for start

Cuberto 3k Dec 21, 2022