A simple, powerful widget to build cool transitions

Last update: Jul 29, 2021

motion_widget

A simple, powerful widget to build cool transitions

Features

  • Fine-grained control with Interval
  • Lightweight & fully customizable
  • No boilerplate code
  • Works with Row & Column
  • Support for Translate & Fade modes
  • Provides Exit transitions
  • No code clean-up required

Screenshots

Screenshot

Usage

To use this plugin :

  • Add the dependency
  dependencies:
    flutter:
      sdk: flutter
    motion_widget:
  • Use the widget as a Row or a Column
Motion<Row>(
    children: <Widget>[]
)
  • Wrap its child with MotionElement
MotionElement(
    interval: Interval(0.3, 0.9)
    mode: MotionMode.FADE
    child: Container()
    orientation: MotionOrientation.HORIZONTAL_LEFT
)
  • Provide exitConfigurations for exit transitions
Motion(
    exitConfigurations: MotionExitConfigurations(
        displacement: 200,
        orientation: MotionOrientation.HORIZONTAL_LEFT,
        durationMs: 400
    )
)

Pull Requests

All the pull requests are welcomed. Please feel free to make valuable additions in the code.

Created by

Sumeet Rukeja (LinkedIn)

License

Copyright 2020 Sumeet Rukeja

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

GitHub

https://github.com/smokelaboratory/motion_widget
Comments
  • 1. The method 'dispose' was called on null

    Hi, thank you for that awesome library!

    I have a bottom tab bar, as soon as I navigate to another screen I get the following issue. My motion widget usage is:

            Motion<Column>(
              durationMs: 1000,
              children: <Widget>[
                MotionElement(
                  child: TrainingUnit(),
                  interval: Interval(0, 1),
                ),
                MotionElement(
                  child: TrainingUnit(),
                  interval: Interval(0.3, 1),
                ),
                MotionElement(
                  child: Center(
                      child: PrimaryButton('Zum Workout', () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) => PreparationScreen(),
                            fullscreenDialog: true));
                  })),
                  interval: Interval(0.6, 1),
                ),
              ],
            ),
    

    Error Log:

    ════════ Exception caught by widgets library ═══════════════════════════════════
    The following NoSuchMethodError was thrown while finalizing the widget tree:
    The method 'dispose' was called on null.
    Receiver: null
    Tried calling: dispose()
    
    When the exception was thrown, this was the stack
    #0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:53:5)
    #1      _MotionState.dispose 
    package:motion_widget/motion_widget.dart:152
    #2      StatefulElement.unmount 
    package:flutter/…/widgets/framework.dart:4435
    #3      _InactiveElements._unmount 
    package:flutter/…/widgets/framework.dart:1748
    #4      _InactiveElements._unmount.<anonymous closure> 
    package:flutter/…/widgets/framework.dart:1746
    ...
    ════════════════════════════════════════════════════════════════════════════════
    
    Reviewed by obrunsmann at 2020-03-14 08:40
  • 2. Fixes dispose all on null

    I was not able to find out why the motionController is NULL because in my case the whole component might have been initialized fully and the motionController might have been setup completely.

    This PR fixes the exception on issue #1

    I used motion_widgeet within a bottom tab bar content pane

    Reviewed by obrunsmann at 2020-03-19 08:06
  • 3. AnimationController.dispose() called more than once

    Hi Sumeet, How I do with this Exception please?

    StackTrace: ════════ Exception caught by widgets library ═══════════════════════════════════════════════════════ The following assertion was thrown while finalizing the widget tree: AnimationController.dispose() called more than once.

    A given AnimationController cannot be disposed more than once.

    The following AnimationController object was disposed multiple times: AnimationController#8f166(⏮ 0.000; paused; DISPOSED) When the exception was thrown, this was the stack: #0 AnimationController.dispose. (package:flutter/src/animation/animation_controller.dart:755:9) #1 AnimationController.dispose (package:flutter/src/animation/animation_controller.dart:766:6) #2 _MotionState.dispose (package:motion_widget/motion_widget.dart:153:44) #3 StatefulElement.unmount (package:flutter/src/widgets/framework.dart:4729:12) #4 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) ... ════════════════════════════════════════════════════════════════════════════════════════════════════

    Thank you so much in advance!

    Reviewed by hiddenMonster at 2020-06-30 15:55
  • 4. Not able to use without Column or Row

    I hope that I've not overlooked something but it seems like it's not possible to use the animations without creating an extra Column or Row. Would it be possible to implement the feature to use these animations for a single widget (without creating a Column/Row)?

    Besides this the package is awesome - thanks for sharing!

    Reviewed by C4s4r at 2020-06-25 20:58
  • 5. Unable to update child of MotionElement with provider

    The children of my MotionElements are widgets that rely on a provider for theming. I'm trying to use the Motion<Column> for my onboarding, in which you can also pick a theme that is updated live.

    Everything is changing properly despite the children that are wrapped in the MotionElement class, when notifyListeners() is called. Even setState() doesn't help with this.

    Is this intended and is there a way to fix this behaviour?

    Reviewed by C4s4r at 2021-06-29 17:26
  • 6. motionController is NULL in some cases

    This is related to Issue #1:

    In some cases the motionController seems to be null. In my case I use a bottom tab navigation with a switch for deciding which body to render.

    As soon as I leave the page (and unmount) the "Tab-body-widget" I get the error The method 'dispose' was called on null

    Reviewed by obrunsmann at 2020-03-19 10:29

Related

A super powerful widget to help developers build complex views quickly and comfortably.
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

May 16, 2022
This is flutter package for creating a gender selection widget which allows users to choose a gender with cool animations
This is flutter package for creating a gender selection widget which allows users to choose a gender with cool animations

gender_selection A Flutter package for gender selection. It is an aweome gender selection widget with cool gradients and animation effects Demo Instal

Apr 8, 2022
Simple but pretty cool birthday countdown app built using flutter
Simple but pretty cool birthday countdown app built using flutter

Simple but pretty cool birthday countdown app "For You" ?? Don't forget to star ⭐ the repo if you like what you I have created ?? . ?? GIF of a sample

Feb 1, 2022
Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern.
Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern.

Karee Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern. + = About Karee Karee is a frame

May 4, 2022
A simple, smart and powerful Flutter calculator widget.
A simple, smart and powerful Flutter calculator widget.

Flutter Calculator Widget A simple, smart and powerful Flutter calculator widget. Features Basic arithmetic: plus, minus, multiply, divide, %, bracket

Mar 26, 2022
Cool linter This is a custom linter package for dart/flutter code.
 Cool linter  This is a custom linter package for dart/flutter code.

Cool linter This is a custom linter package for dart/flutter code. It can set linter for exclude some of words. This words you can set in analysis_opt

Mar 4, 2022
A complete music player in flutter with cool UI and design.
A complete music player in flutter with cool UI and design.

Flutter Music Player A complete and open source music player designed in flutter. It is first complete music player designed in flutter. This app expl

May 5, 2022
Collection of cool Layouts built with Flutter to Inspire Other UI developers and explore the possibilities of Flutter.
Collection of cool Layouts built with Flutter to Inspire Other UI developers and explore the possibilities of Flutter.

Awesome_Flutter_Layouts Would you like to Contribute your Designs? Please refer the Contribution guidelines before you dive In Need help? or Looks Som

Mar 29, 2022
A simple yet powerful Flutter plugin for showing Toast at Android, iOS and Web.

Flutter Toast A simple yet powerful Flutter plugin for showing Toast at Android and iOS. Features: Native Toast Pure Flutter Toaster Installation Add

Dec 13, 2021
Simple yet powerful form state management
Simple yet powerful form state management

formini Working with forms shouldn't be so hard in Flutter. Please note that the schemani/formini packages are under development. There are still some

Dec 12, 2019
This is an open source Tips & Tricks for Flutter, that helps flutter Developers write simple but powerful dart codes.

Showcasing-flutter - This is an open source Tips & Tricks for Flutter, that helps flutter Developers write simple but powerful dart codes.

Jan 4, 2022
a simple yet powerful state management technique for Flutter
a simple yet powerful state management technique for Flutter

States_rebuilder `states_rebuilder` is Flutter state management combined with a dependency injection solution and an integrated router to get the best

May 26, 2022
Simple Chat UI - This template is a simple chat ui build with flutter ui toolkit.
Simple Chat UI - This template is a simple chat ui build with flutter ui toolkit.

Simple Chat UI This template is a simple chat ui build with flutter ui toolkit. TODO dark mode support image support gif, video, ... web mode desktop

Apr 24, 2022
A simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR
A simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR

flutter_deepar This is a simple project that will help you learn how to build a simple face filter app with Flutter and Deep AR You can read an articl

Mar 11, 2022
A quick and powerful Flutter layout with a bottom navbar.
A quick and powerful Flutter layout with a bottom navbar.

What is bottom_nav_layout? It is a quick flutter app layout for building an app with a bottom nav bar. You can get an app with fluent behavior running

Feb 19, 2022
A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc.

dio_http A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout

Dec 19, 2021
Powerful, helpfull, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server with boilerplate code free.
Powerful, helpfull, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server with boilerplate code free.

flutter_axelor_sdk Powerful, helpful, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server w

Nov 12, 2021
A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc.
A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc.

Language: English | 中文简体 dio A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File

May 23, 2022
🎯 A powerful multiplatform application with Flutter and Supabase for the Komentory project.

?? Multiplatform application for Komentory project A powerful multiplatform application with Flutter and Supabase for the Komentory project. Currently

Mar 1, 2022