A simple, powerful widget to build cool transitions

Overview

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.
Comments
  • The method 'dispose' was called on null

    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
    ...
    ════════════════════════════════════════════════════════════════════════════════
    
    opened by obrunsmann 3
  • Fixes dispose all on null

    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

    opened by obrunsmann 2
  • AnimationController.dispose() called more than once

    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!

    opened by hiddenMonster 1
  • Not able to use without Column or Row

    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!

    opened by C4s4r 1
  • Unable to update child of MotionElement with provider

    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?

    opened by C4s4r 0
  • motionController is NULL in some cases

    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

    opened by obrunsmann 1
Owner
Sumeet Rukeja
A technology enthusiast, a gamer & a F.R.I.E.N.D.S fan
Sumeet Rukeja
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

Fliggy Mobile 481 Dec 29, 2022
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

Fliggy Mobile 481 Dec 29, 2022
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

Rohan Malik 10 Apr 8, 2022
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

Ruslan Hasanov 6 Aug 13, 2022
A simple project with cool animations and fluid UI

Pokedex This task was quite an interesting one. As with all my projects, I started with understanding the scope and state of this app. I decided to us

JasperEssien 7 Dec 31, 2022
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

flytreeleft 5 Nov 9, 2022
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

@LeCode 44 Sep 29, 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. It can set linter for exclude some of words. This words you can set in analysis_opt

null 8 Mar 4, 2022
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

Aman gautam 423 Dec 30, 2022
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

Mahesh Jamdade 103 Nov 22, 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

Eyro Labs 5 Dec 13, 2021
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

Vantage Oy 1 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.

Paul Edeme'kong - Flutter Fairy 1 Jan 4, 2022
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

MELLATI Fatah 480 Jan 2, 2023
Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

tenon_mortise Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui. Getting Started Usage To use this plugin

JieLiu 4 Dec 15, 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. TODO dark mode support image support gif, video, ... web mode desktop

null 2 Apr 24, 2022
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

mobile software engineer and team leader 3 Mar 11, 2022
Widget to count the amount of nested widget tree, useful in the dynamic construction of the interface when it is important to know the depth of widget.

widget_tree_depth_counter Widget Tree Depth Counter WidgetTreeDepthCounter is a simple widget to count the amount of nested widget tree, useful in the

Riccardo Cucia 4 Aug 1, 2022
MindInventory 15 Sep 5, 2022