gifatahth / animator Goto Github PK

View Code? Open in Web Editor NEW

227.0 227.0 29.0 390 KB

A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

License: BSD 3-Clause "New" or "Revised" License

Java 0.20% Objective-C 0.28% Dart 84.32% Shell 0.20% Kotlin 0.04% Swift 0.51% HTML 0.06% CMake 6.44% C++ 7.43% C 0.51%

animator's People

Contributors

Stargazers

Watchers

animator's Issues

Can it support delay/wait property ?

When using a column containing TextField widgets in Animator the keyboard gets hidden immediately

Even though the TextField widget retain focus, I am not sure what I am doing wrong, I just have an Animator which has a nested column which has a nested Row containing two textFields with the first being read only and the second one having a focus node and controller setup

multiple fadeIn and FractionalTranslation animation

how can i use multiple fadeIn and FractionalTranslation animation to show and hide widget like with below screen shot:

my implementation work but its not correct

return Container(
  child: Animator(
    tweenMap: {
      "opacity": Tween<double>(begin: 1, end: 0),
      "translation": Tween<Offset>(begin: Offset.zero, end: Offset(0,1))
    },
    cycles: 0,
    duration: Duration(milliseconds: 300),
    builderMap: (Map<String, Animation> anim) => FadeTransition(
      opacity: anim["opacity"],
      child: FractionalTranslation(
        translation: anim["translation"].value,
        child: child,
      ),
    ),
  ),
);

triggerAnimation is toggling between reverse and forward

triggerAnimation would toggle between forward() and reverse().
Is there a way to force forward always? I could create a PR.

Using animator with some TextField cause of restart animation

please see this code:

Animator(
  tween:
  Tween<double>(begin: 0.8, end: 1.2),
  curve: Curves.fastOutSlowIn,
  duration: Duration(milliseconds: 1500),
  cycles: 0,
  builder: (anim) => Transform.scale(
    scale: anim.value,
    child: Container(
      margin:
      EdgeInsets.only(left: 20.0),
      height: 50.0,
      width: 50.0,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
              image: ExactAssetImage(
                  "assets/images/profile.jpg"))),
    ),
  ),
),

I'm uing this animation with some other TextField case of restart this animation

Getting exception "No observer is subscribed yet" after switching to to 1.0.0+4

After upgrading Animator from 1.0.0+2 -> 1.0.0+4 I am running into a "No observer is subscribed yet" exception coming from the states_rebuilder lib.

I have a TabBar in my BottomNavigationBar. The first tab has an Animator() widget. The animation works fine. But after I navigate to the second tab I start to see the following error over and over again:

════════ (1462) Exception caught by animation library ══════════════════════════════════════════════
Exception: 
***No observer is subscribed yet***
| There is no observer subscribed to this observable StatesRebuilderWithAnimator<double> model.
| To subscribe a widget you use:
| 1- StateRebuilder for an already defined:
|   ex:
|   StatesRebuilder(
|     models: [StatesRebuilderWithAnimator<double>instance],
|     builder : ....
|   )
| 2- Injector.get<StatesRebuilderWithAnimator<double>>(context : context). for explicit reactivity.
| 3- Injector.getAsReactive<StatesRebuilderWithAnimator<double>>(context : context). for implicit reactivity.
| 4- StateRebuilder for new reactive environment:
|   ex:
|   StatesRebuilder<StatesRebuilderWithAnimator<double>>(
|     builder : ....
|   )
| 5 - StatesWithMixinBuilder. similar to StateBuilder.
| 
| To silent this error you check for the existence of observers before calling [rebuildStates]
| ex:
|  if(hasObservers){
|    rebuildStates()
| }
════════════════════════════════════════════════════════════════════════════════════════════════════

state property on new version of states_rebuilder

after updating states_rebuilder to new version i get error on status which used on this library

Doesn't work with Flutter 3.19

../../../../.pub-cache/hosted/pub.dev/navigation_builder-0.0.3/lib/src/rm_scaffold.dart:102:3: Error: Expected 0 type arguments.
  PersistentBottomSheetController<T> showBottomSheet<T>(

You need to upgrade states_rebuilder.

Warning with Flutter 3.0.0

Hello Sir!
There is an issue when I try to run my old project after migrate it on flutter version 3.0.0,
it seams that the warning come from animator.

has type 'widgetsbinding' which excludes null. - 'widgetsbinding'
some thing like that.
Please check it.

I apologize for not having introduced the related code and error

animator and sates rebuilder version problem?

I get the following message when I try to use them together...

Running "flutter pub get" in slider_tester...
Because animator >=2.0.0 depends on states_rebuilder ^1.15.0 and slider_tester depends on states_rebuilder ^2.0.0, animator >=2.0.0 is forbidden.

So, because slider_tester depends on animator ^2.0.0, version solving failed.
pub get failed (1; So, because slider_tester depends on animator ^2.0.0, version solving failed.)

Is this to be expected?

greetings

Animator should also support implicit animations.

I am using an animated container to transform the position of the widget. Animated Container only requires one X and one Y point to do a transformation from one coordinate to another but I can't find any way to do that with the animator as I can't get the old X and Y.

builderMap isn't a defined property of Animator class!

@GIfatahTH sir please correct your medium article here it is misleading.

Solution : For multitween animation, use build instead of builderMap, since builderMap isn't a defined property of Animator class.

  final Widget child;
  AnimatedLogo({this.child});

  Widget build(BuildContext context) {
    return Animator(
      tweenMap: {
        "opacity": Tween<double>(begin: 0, end: 1),
        "translation": Tween<Offset>(begin: Offset.zero, end: Offset(4, 0)),
      },
      cycles: 0,
      duration: Duration(seconds: 2),
      builder: (context, anim, child) => FadeTransition(
        opacity: anim.getAnimation('opacity'),
        child: FractionalTranslation(
          translation: anim.getValue('translation'),
          child: child,
        ),
      ),
    );
  }
}

Crashing on build

Probably conflict resolution. maybe for something else but right build doesn't work at all with this library. Just crash on flutter run with animator: 1.0.0+2.

Compiler message:
../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/states_rebuilder_with_animator.dart:10:16: Error: Type 'ListenerOfStatesRebuilder' not found.
    implements ListenerOfStatesRebuilder {
               ^^^^^^^^^^^^^^^^^^^^^^^^^
../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/animator.dart:164:18: Error: The argument type 'Null Function(BuildContext, TickerProvider, dynamic)' can't be assigned to the parameter type 'void Function(BuildContext, TickerProvider)'.
 - 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('../../../Library/Flutter/packages/flutter/lib/src/widgets/framework.dart').
 - 'TickerProvider' is from 'package:flutter/src/scheduler/ticker.dart' ('../../../Library/Flutter/packages/flutter/lib/src/scheduler/ticker.dart').
Try changing the type of the parameter, or casting the argument to 'void Function(BuildContext, TickerProvider)'.
      initState: (_, __, ticker) {
                 ^
../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/animator.dart:168:16: Error: The argument type 'void Function(BuildContext, TickerProvider, dynamic)' can't be assigned to the parameter type 'void Function(BuildContext, TickerProvider)'.
 - 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('../../../Library/Flutter/packages/flutter/lib/src/widgets/framework.dart').
 - 'TickerProvider' is from 'package:flutter/src/scheduler/ticker.dart' ('../../../Library/Flutter/packages/flutter/lib/src/scheduler/ticker.dart').
Try changing the type of the parameter, or casting the argument to 'void Function(BuildContext, TickerProvider)'.
      dispose: (_, __, ___) => _animatorBloc.dispose(),
               ^
../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/states_rebuilder_with_animator.dart:175:49: Error: The argument type 'StatesRebuilderWithAnimator<T>' can't be assigned to the parameter type 'ObserverOfStatesRebuilder'.
 - 'StatesRebuilderWithAnimator' is from 'package:animator/src/states_rebuilder_with_animator.dart' ('../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/states_rebuilder_with_animator.dart').
 - 'ObserverOfStatesRebuilder' is from 'package:states_rebuilder/src/states_rebuilder.dart' ('../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/states_rebuilder-1.8.0/lib/src/states_rebuilder.dart').
Try changing the type of the parameter, or casting the argument to 'ObserverOfStatesRebuilder'.
        b$.addObserver(tag: _tagName, observer: this);
                                                ^
../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/states_rebuilder_with_animator.dart:185:21: Error: The argument type 'StatesRebuilderWithAnimator<T>' can't be assigned to the parameter type 'ObserverOfStatesRebuilder'.
 - 'StatesRebuilderWithAnimator' is from 'package:animator/src/states_rebuilder_with_animator.dart' ('../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+2/lib/src/states_rebuilder_with_animator.dart').
 - 'ObserverOfStatesRebuilder' is from 'package:states_rebuilder/src/states_rebuilder.dart' ('../../../Library/Flutter/.pub-cache/hosted/pub.dartlang.org/states_rebuilder-1.8.0/lib/src/states_rebuilder.dart').
Try changing the type of the parameter, or casting the argument to 'ObserverOfStatesRebuilder'.
          observer: this,
                    ^

[New Feature] Staggered Animation using AnimateWidget

Staggered Animation

Using AnimateWidget, you can specify for each animate value, its onw curve and reverseCurve using setCurve and setReverseCurve.

This is the same example as in Flutter docs for staggered animation:

class _MyStaggeredWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        setState(() {});
      },
      child: AnimateWidget(
        duration: const Duration(milliseconds: 2000),
        cycles: 2,
        triggerOnRebuild: true,
        triggerOnInit: false,
        builder: (context, animate) {
          final padding = animate
              .setCurve(Interval(0.250, 0.375, curve: Curves.ease))
              .fromTween(
                (_) => EdgeInsetsTween(
                  begin: const EdgeInsets.only(bottom: 16.0),
                  end: const EdgeInsets.only(bottom: 75.0),
                ),
              );
          final opacity = animate
              .setCurve(Interval(0.0, 0.100, curve: Curves.ease))
              .fromTween(
                (_) => Tween<double>(begin: 0.0, end: 1.0),
              )!;
          final containerWidget = animate
              .setCurve(Interval(0.125, 0.250, curve: Curves.ease))
              .fromTween(
                (_) => Tween<double>(begin: 50.0, end: 150.0),
                'width',
              )!;
          final containerHeight = animate
              .setCurve(Interval(0.250, 0.375, curve: Curves.ease))
              .fromTween(
                (_) => Tween<double>(begin: 50.0, end: 150.0),
                'height',
              )!;
          final color = animate
              .setCurve(Interval(0.500, 0.750, curve: Curves.ease))
              .fromTween(
                (_) => ColorTween(
                  begin: Colors.indigo[100],
                  end: Colors.orange[400],
                ),
              );
          final borderRadius = animate
              .setCurve(Interval(0.375, 0.500, curve: Curves.ease))
              .fromTween(
                (_) => BorderRadiusTween(
                  begin: BorderRadius.circular(4.0),
                  end: BorderRadius.circular(75.0),
                ),
              );
          return Center(
            child: Container(
              width: 300.0,
              height: 300.0,
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.1),
                border: Border.all(
                  color: Colors.black.withOpacity(0.5),
                ),
              ),
              child: Container(
                padding: padding,
                alignment: Alignment.bottomCenter,
                child: Opacity(
                  opacity: opacity,
                  child: Container(
                    width: containerWidget,
                    height: containerHeight,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(
                        color: Colors.indigo[300]!,
                        width: 3.0,
                      ),
                      borderRadius: borderRadius,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Here is the full working example.

One of the particularities of Animator is that you can use staggered animation with implicitly animated widget. Here is the above example with implicit staggered animation

Animator with latest states_rebuilder

can you update the example with latest states rebuilder?

I am lost. I just want to show and hide an appBar, in debug console it says the animation started but the ui not animatin

import 'package:animator/animator.dart';
import 'package:flutter/material.dart';
import 'package:states_rebuilder/states_rebuilder.dart';
class ReaderService extends StatesRebuilderWithAnimator {
  bool showMenuBar = false;
  init(TickerProvider ticker) {
    animator.tweenMap = {
      "appBarAnim": Tween<double>(
        begin: showMenuBar ? -1 : 0,
        end: showMenuBar ? 0 : -1,
      ),
    };
    initAnimation(ticker);
    addAnimationListener(() {
      rebuildStates(["appBar"]);
    });
    animator.cycles = 1;
    animator.duration = Duration(milliseconds: 200);

    endAnimationListener(() => print("animation finished"));
  }

  startAnimation([bool reset = false]) {
    triggerAnimation(reset: reset);
  }

  dispose() {}
}

class ReaderTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Injector(
      inject: [Inject(() => ReaderService())],
      builder: (context) {
        var model = Injector.get<ReaderService>();
        return StateWithMixinBuilder(
          mixinWith: MixinWith.tickerProviderStateMixin,
          models: [model],
          initState: (ctx, ticker) => model.init(ticker),
          dispose: (_, ___) => model.dispose(),
          builder: (_, __) => Scaffold(
            body: Stack(
              children: <Widget>[
                Container(
                  child: GestureDetector(
                    onTap: () {
                      model.showMenuBar = !model.showMenuBar;
                      model.rebuildStates(["appBar"]);

                      model.startAnimation(true);
                    },
                  ),
                ),
                StateBuilder(
                    tag: "appBar",
                    models: [model],
                    builder: (_, __) {
                      return Align(
                          alignment: Alignment.topCenter,
                          child: FractionalTranslation(
                            translation: Offset(
                                0, model.animationMap["appBarAnim"].value),
                            child: Container(
                                height: 100,
                                width: double.infinity,
                                color: Colors.red,
                                child: Center(
                                    child: Text("${model.showMenuBar}"))),
                          ));
                    }),
              ],
            ),
          ),
        );
      },
    );
  }
}

Start Animation by using Animator State

Problem.
There is no way to update particular Widget at specific time and specific direction.

Workaround.
To animate item in specific time to specific direction we need to save last Animation value provided by Animator and set parameter resetAnimationOnRebuild to true. Then based on previous saved value decide direction for next animation and recreate entire Widget with Animator. This all in order to play it.

Consider.
Allow to retrieve some contract (interface) fromAnimator (probably via GlobalKey). In order to call simple functions with animation (forward, start, reverse,) to particular direction.

SetState always crash with animator

Hi,

For an animation (with the animator framework), used with animatorKey.

That will always crash if I use a setState.
See the error :

`════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following _Exception was thrown while finalizing the widget tree:
Exception:
| Trying to unregister non registered Tag
| The tag: [AutoGeneratedTag#|:567] is not registered in this [AnimatorStateImp] observers.
| Tags are automatically registered by states_rebuilder.
| If you see this error, this means that something wrong happens.
| Please report an issue.
|
| The registered tags are : (AutoGeneratedTag#|:836)

When the exception was thrown, this was the stack:
#0 StatesRebuilder.removeObserver. (package:states_rebuilder/src/states_rebuilder.dart:73:11)
#1 StatesRebuilder.removeObserver (package:states_rebuilder/src/states_rebuilder.dart:87:8)
#2 _dispose (package:states_rebuilder/src/state_builder.dart:525:12)
#3 StateBuilderState.dispose (package:states_rebuilder/src/state_builder.dart:259:5)
#4 StatefulElement.unmount (package:flutter/src/widgets/framework.dart:4773:12)
...
════════════════════════════════════════════════════════════════════════════════════════════════════`

I can't get an implicit animation to work

All I want to be able to do is
run a translation if a variable is true
and a different translation if a variable is false

with implicit animations, it's expected that you can simply change the variable and the change will be made
in my case, the variable change is detected by an animated builder
the animated builder is indeed catching the change
and tween indeed is being updated
but the animator isn't performing the animation

if you could provide an example of how to do this that would be great...
in flutter doing something like this with the animated container color takes seconds

I would imagine if this plugin has the capabilities I expect it should take around the same time

hopefully, it isn't too much work

Infinity repeats

I miss the option repeat an animation infinitely. At the moment I have to write: repeats: 999999 :(

Animator key is not working whenever i am setting state of stateful Widget as well as trigger animation

I have initialized it with a key directly in class
final AnimatorKey animatorKey = AnimatorKey();

I am using it in a gesture Detector like this
GestureDetector buildPostImage() {
return GestureDetector(
onDoubleTap: () {
handleLikePost(); //trigger of animation
},
child: Stack(
alignment: Alignment.center,
children: [
cachedNetworkImage(
widget.mediaUrl,
),
Animator(
resetAnimationOnRebuild: true,
animatorKey: animatorKey,
duration: Duration(seconds: 1),
tween: Tween(begin: 0.5, end: 1.5),
curve: Curves.elasticInOut,
cycles: 2,
builder: (_, anim, __) => Transform.scale(
scale: anim.value,
child: Icon(
Icons.favorite,
size: 80.0,
color: Colors.red[100],
),
)),
AnimatorRebuilder(
observe: () => animatorKey,
builder: (ctx, anim, child) => Transform.scale(
scale: anim.value,
child: Icon(
Icons.favorite,
size: 80.0,
color: Colors.red[100],
),
))
],
),
);
}

I am triggering animation from here
void handleLikePost() {
_isLiked = widget.likes.contains(widget.currentUserId);

if (_isLiked) {
  setState(() {                                                          //This is Working just fine as i remove setState 
    likeCount -= 1;                                                 //method.But i Want to run it with setState 
                                                                                method
    _isLiked = false;
    widget.likes.remove(widget.currentUserId);
  });
   animatorKey.triggerAnimation(restart: true);   //working if setState is not there    

} else {
  setState(() {
    likeCount += 1;
    _isLiked = true;
    widget.likes.add(widget.currentUserId);
  });


}

Thanx in advance for any help..

Reset Animator state?

Is there a way to reset Animator state? Otherwise it works only for the first time it's created and can't trigger the new animation later on.
Or am I missing something?

Simply a question about it

Hello,

this package is incredibly good 🥇

But, i am new to Dart, Flutter, animations and i have to invest much time to learn it.

With one widget, Animator, you can do all the available animation in Flutter.

Is that true, or morely just said because it sounds nice as description? I want to use flutter because of it's powerfull animations. Animator looks promising to me, so is it worth learning it first or is there much stuff which is not possible at all?

Thank you 👍

Animator resize vertical animation

this below screen video is what i need to implementing that, i think i should use Skew animation to do that, but i'm not sure. i try to use below code to implementing that but it's not correct

my mean is visible 5 icons after change background to white in this demo

my code:

return Animator(
  tween: Tween<double>(begin: 1, end: 0.5),
  duration: Duration(seconds: 2),
  cycles: 0,
  builder: (anim) => Transform(
    transform: Matrix4.skewY(anim.value),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue),
      ),
      child: FlutterLogo(
        size: 50,
      ),
    ),
  ),
);

upgrading to recent states_rebuilder version

Hello,

when you plan to upgrade this package to use the recent states_rebuilder 3+

[New Feature] AnimateWidge for implicit without the limitation of built-in Flutter widget for implicit animation

I added a new widget called AnimateWidget that allows for implicit without limitation.

Let's reproduce the AnimatedContainer example in official Flutter docs. (link here).

In Flutter AnimatedContainer example, we see:

Center(
    child: AnimatedContainer(
        duration: const Duration(seconds: 2),
        curve: Curves.fastOutSlowIn,
        width: selected ? 200.0 : 100.0,
        height: selected ? 100.0 : 200.0,
        color: selected ? Colors.red : Colors.blue,
        alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
        child: const FlutterLogo(size: 75),
    ),
),

With animateWidget, we simply use the Container` widget :

Center(
    child: AnimatedWidget(
        duration: const Duration(seconds: 2),
        curve: Curves.fastOutSlowIn,
        (context, animate) => Container(
            // Animate is a callable class
            width: animate.call(selected ? 200.0 : 100.0),
            height: animate(selected ? 100.0 : 200.0, 'height'),
            color: animate(selected ? Colors.red : Colors.blue),
            alignment: animate(selected ? Alignment.center : AlignmentDirectional.topCenter),
            child: const FlutterLogo(size: 75),
        ),
    );
),

Using the exposed animate function, we set the animation start and end values.
As the width and height are the same type (double), we need to add a name to distinguish them.

You can implicitly animate any type. Here we implicitly animated a double, Color, and Alignment values. If you want to animate two parameters of the same type, you just add a dummy name to distinguish them.

That's all, you are not limited to use a widget that starts with Animated prefix to use implicit animation.

Here is the full working example.

Compiler error - Method not found: 'StatesRebuilder.addToListeners'

Hello,

I got this compiler error trying to use animator for the first time :

Compiler message:
/C:/Users/..../animator-0.1.4/lib/animator.dart:494:27: Error: Method not found: 'StatesRebuilder.addToListeners'.

I'm using :
Flutter: 1.9.1+hotfix.1
rxdart: ^0.22.2
animator: ^0.1.4

This issue is related in Health issues and suggestions of this page :
https://pub.dev/packages/animator?source=post_page-----e378e82b2508----------------------#-analysis-tab-

Any idea ?

Thanks for your awesome job !

Remove print from didUpdateWidget

My debug console is getting spammed with prints from this package. This line should probably be removed:

animator/lib/animator.dart

Line 475 in 5bcd718

print(widget.triggerOnInit);

Compiler Message error

I get the error below when I import the package in my dart page.

file:///Users//development/flutter/.pub-cache/hosted/pub.dartlang.org/states_rebuilder-1.11.1/lib/src/reactive_model.dart:411:17: Error: The method
'dependOnInheritedWidgetOfExactType' isn't defined for the class 'BuildContext'.

'BuildContext' is from 'package:flutter/src/widgets/framework.dart'
('file:///Users//development/flutter/packages/flutter/lib/src/widgets/framework.dart').
Try correcting the name to the name of an existing method, or defining a method named 'dependOnInheritedWidgetOfExactType'.
context.dependOnInheritedWidgetOfExactType<InheritedInject>();

Animation slow to start

I have a 1-2s delay lag when firing an animation, and I can't figure out why.

Animator(
                  tween: Tween<Offset>(
                    begin: Offset(0, 0),
                    end: Offset(0, -50)
                  ),
                  cycles: 2,
                  duration: Duration(milliseconds: 400),
                  curve: Curves.easeOut,
                  triggerOnInit: true,
                  builder: (anim) =>
                      Transform(
                        transform: Matrix4.translationValues(0, anim.value.dy, 0),
                        child: Image(
                          image: getMascotImage(),
                          width: 250,
                          height: 250,
                        ),
                      )
                )

Prevent rebuild costly widgets

Is there some way to provide a animator child like in animation controller to prevent rebuild expensive widgets??

Something like:

...
return Animator(
      tween: Tween<double>(begin: 0, end: 300),
      cycles: 0,
      child: SomeCostlyOrNotWidget() // <-----
      builder: (anim, child) => Center(
            child: Container(
              margin: EdgeInsets.symmetric(vertical: 10),
              height: anim.value,
              width: anim.value,
              child: child, <--- No rebuild the entire widget
            ),
          ),
    );
...

AnimateWidget doesn't react with child sizes changes

When the condition returns true the animation works well, But when it gives false there is no animation
Note that it works for both conditions with AnimatedSwitcher but it doesn't support triggerOnInit

AutoAnimatedWidget(
  child: Builder(
    builder: (context) {
      if (form.schedulingForm.enabled) {
        return Container(
          height: 200,
          width: double.infinity,
          color: Colors.red,
          alignment: Alignment.center,
          child: const SizedBox(),
        );
      }

      return const SizedBox();
    },
  ),
),

class AutoAnimatedWidget extends StatelessWidget {
  final Widget child;

  const AutoAnimatedWidget({
    super.key,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return AnimateWidget(
      curve: Curves.fastOutSlowIn,
      reverseCurve: Curves.fastOutSlowIn,
      duration: const Duration(milliseconds: 750),
      reverseDuration: const Duration(milliseconds: 750),
      triggerOnRebuild: true,
      builder: (p0, animate) => FadeTransition(
        opacity: animate.curvedAnimation,
        child: SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0, -0.2),
            end: Offset.zero,
          ).animate(animate.curvedAnimation),
          child: SizeTransition(
            sizeFactor: animate.curvedAnimation,
            axisAlignment: 1,
            child: child,
          ),
        ),
      ),
    );
  }
}

    //  AnimatedSwitcher
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 650),
      reverseDuration: const Duration(milliseconds: 650),
      switchInCurve: Curves.fastOutSlowIn,
      switchOutCurve: Curves.fastOutSlowIn,
      transitionBuilder: (child, animation) => FadeTransition(
        opacity: animation,
        child: SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0, -0.2),
            end: Offset.zero,
          ).animate(animation),
          child: SizeTransition(
            sizeFactor: animation,
            axisAlignment: 1,
            child: child,
          ),
        ),
      ),
      child: child,
    )

can't set the animation duration using explicit mode

I have copied the code from the example explicit_like.dart and tried to set the duration to some other value but then the animation is not playing. the only way is to not set the duration and get the default 500ms. how are we supposed to correctly set the duration in explicit mode?

implicit-animation-example does not work

Except main, trying your sample

https://github.com/GIfatahTH/animator#implicit-animation-example

Have seen great samples here for Animator, but this does not work for me. I cannot copy paste all the lines so i just shot a pic.

Animation on Draggable

Hi, i am using this library and works great.

I want use this in Draggable widget, but any time i drag and drop the animation restart.

I try with the configuration animateOnRebuild & resetAnimationOnRebuild but still happends

How to implement repeat functionality when reverse is true

I am unable to use repeat function of animationController
final AnimationController animationController = animatorState.controller..repeat(reverse: true);

when reverse is true the package seems to not working properly. Can you please an working example of repeat(reverse: true)

Duration doesn't seem to reset on windows device 1.0.0+5

This will work for the first 10 seconds when the application starts and then, it will act as if duration is 0 seconds.
Here a tween gets updated:

void _updateScale() {
    setState(() {
        if(zoomed) {
          scaleAnimation = new Tween<double>(begin:2.0, end:1.0);
        } else {
          scaleAnimation = new Tween<double>(begin:1.0, end:2.0);
        }
        zoomed = !zoomed;
    });
  }

Then, here is the main part of a build function:

GestureDetector(
                      onDoubleTap: _updateScale,
                      child: Animator(
                          curve: Curves.linear,
                          tween: scaleAnimation,
                          duration: const Duration(seconds:10),
                          cycles: 1,
                          builder: (anim) => Transform.scale(
                            scale: anim.value,
                            child: Text('hey'),
                             ),
                       ),
),

Support null safety

The library 'package:flutter_animator/flutter_animator.dart' is legacy, and should not be imported into a null safe library.
Try migrating the imported library.

Error: This project cannot run with sound null safety, because one or more project dependencies do not
support null safety:

package:flutter_animator

dependencies:
animator: ^2.0.2

set scale size for Curves.elasticOut

in this code how can i set scale in/out size for animation, i want to implementing this animation:

Animator(
  duration: Duration(seconds: 1),
  curve: Curves.elasticOut,
  cycles:0,
  builder: (anim) {
    return Transform.scale(
      origin: Offset(0.0, 0.0),
      scale: anim.value,
      child: CircleAvatar(
        radius: 30,
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        backgroundImage: NetworkImage(
          "https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
        ),
      ),
    );
  },
)

Exception when Animation gets updates

I get an many exceptions when my Animations get updated:

When the exception was thrown, this was the stack: 
#0      StatesRebuilder.rebuildStates.<anonymous closure> (package:states_rebuilder/src/states_rebuilder.dart:120:9)
#1      StatesRebuilder.rebuildStates (package:states_rebuilder/src/states_rebuilder.dart:150:6)
#2      StatesRebuilderWithAnimator._addAnimationListeners.<anonymous closure> (package:animator/src/states_rebuilder_with_animator.dart:81:7)
#3      AnimationLocalListenersMixin.notifyListeners (package:flutter/src/animation/listener_helpers.dart:124:19)
#4      AnimationController._animateToInternal (package:flutter/src/animation/animation_controller.dart:584:9)
...
The AnimationController notifying listeners was: AnimationController#65571(⏮ 1.000; paused)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by animation library ═════════════════════════════════════════════════
Exception: 
***No observer is subscribed yet***
| There is no observer subscribed to this observable StatesRebuilderWithAnimator<double> model.
| To subscribe a widget you use:
| 1- StateRebuilder for an already defined:
|   ex:
|   StatesRebuilder(
|     models: [StatesRebuilderWithAnimator<double>instance],
|     builder : ....
|   )
| 2- Injector.get<StatesRebuilderWithAnimator<double>>(context : context). for explicit reactivity.
| 3- Injector.getAsReactive<StatesRebuilderWithAnimator<double>>(context : context). for implicit reactivity.
| 4- StateRebuilder for new reactive environment:
|   ex:
|   StatesRebuilder<StatesRebuilderWithAnimator<double>>(
|     builder : ....
|   )
| 5 - StatesWithMixinBuilder. similar to StateBuilder.
| 
| To silent this error you check for the existence of observers before calling [rebuildStates]
| ex:
|  if(hasObservers){
|    rebuildStates()
| }
════════════════════════════════════════════════════════════════════════════════════════════════════

I update all my animation in this class and I am not sure what I should do to address the exception from the Animation Library. Also the stream might update when the previous Animation is not done yet.

class StreamAnimatorBuilder<T extends Unit> extends StatelessWidget {
  final StreamValue<T> streamValue;
  final Widget Function(double) builder;
  final Duration Function() durationCallback;
  //final Duration animationDuration;
  final Curve curve;

  StreamAnimatorBuilder(
      {@required this.streamValue,
      @required this.builder,
      @required this.durationCallback,
      this.curve = Curves.easeInOut});

  @override
  Widget build(BuildContext context) => StreamBuilder<T>(
        stream: streamValue.stream,
        initialData: null,
        builder: (context, snapshot) {
          Unit previous = streamValue.previousValue;
          double previousValue = double.parse(previous.value);
          Unit newValue = streamValue.value;
          double value = double.parse(newValue.value);

          if (snapshot.data == null ||
              snapshot.hasError ||
              previous == null ||
              newValue == null) {
            return Container();
          } else {
            //print("ANIMATION VALUES: $previousValue , $value");

            return Animator(
                resetAnimationOnRebuild: true,
                tween: Tween<double>(begin: previousValue, end: value),
                cycles: 1,
                duration: durationCallback(),
                curve: curve,
                builder: (anim) => builder(anim.value));
          }
        },
      );
}

Here is an example how I use the class above:

  Widget _renderAnimatedLinearProgress(
          BuildContext context, ValueDecoderBloc<Unit> bloc) =>
      StreamAnimatorBuilder<Unit>(
        streamValue: bloc.valueStream,
        durationCallback: () => Duration(
          milliseconds: int.parse(
              BlocProvider.of(context).elmBloc.pidUpdateRateBloc.value.value),
        ),
        builder: (value) => CustomPaint(
          painter: LinearProgressPainter(
            value: _calculateValue(value, bloc),
          ),
        ),
      );

Here is a more detailed description is needed:
https://medium.com/@ride4sun/flutter-animations-with-the-bloc-pattern-in-6-lines-of-code-53dbb2cba3da

Animation on Stream update for bloc pattern

Hey I just wanted to say thank you for the cool Animator Lib. Saved me tons of work and I always thought that it is hard to separate the Animation code from the rest. You nailed it.

I combined your lib with a StreamAnimatorBuilder and came up with this which animates on Stream update. Something similar could be part of your package

class` StreamAnimatorBuilder<T extends Unit> extends StatelessWidget {
  final StreamValue<T> streamValue;
  final Widget Function(Animation) builder;
  final Duration animationDuration;
  final Curve curve;

  StreamAnimatorBuilder(
      {@required this.streamValue,
      @required this.builder,
      this.animationDuration = const Duration(milliseconds: 500),
      this.curve = Curves.easeOut});

  @override
  Widget build(BuildContext context) => StreamBuilder<T>(
        stream: streamValue.stream,
        initialData: null,
        builder: (context, snapshot) {
          Unit previous = streamValue.previousValue;
          double previousValue = double.parse(previous.value);
          Unit newValue = streamValue.value;
          double value = double.parse(newValue.value);

          if (snapshot.data == null || snapshot.hasError) {
            return Container();
          } else {
            return Animator(
                tween: Tween<double>(begin: previousValue, end: value),
                cycles: 1,
                duration: animationDuration,
                curve: curve,
                builder: (anim) => builder(anim));
          }
        },
      );

in use it looks pretty slick:

 Widget _buildSpeedometer() => StreamAnimatorBuilder<Speed>(
        streamValue: BlocProvider.of(context).elmBloc.speed.valueStream,
        builder: (anim) => GaugeWidget(
              value: anim.value,
              dialTickStartDegree: -120.0,
              dialTickStopDegree: 120.0,
              dialMainTicks: system == UnitSystem.Metrics
                  ? [0, 50, 100, 150, 200, 250, 300, 330]
                  : [0, 25, 50, 75, 100, 125, 150, 175],
              dialTickIncrements: system == UnitSystem.Metrics ? 10 : 5,
              dialRedLimit: double.maxFinite,
              dialTextToTickDistanceToRadiusRatio: 1 / 17,
              dialFontSizeToRadiusRatio: 1 / 8,
              dialRingWidthToRadiusRatio: 1 / 14,
              dialFontWeight: FontWeight.normal,
              handWidthToRadiusRatio: 1 / 30,
              handLengthToRadiusRatio: 1 / 1.35,
            ),
      );
``

runtime error after updating to Flutter 1.9 and animator 1.0

(10993): 2642 2019-09-11 11:14:38.719961 SEVERE home_test.sentry_error_reporter: Context: building StateWithMixinBuilder(state: _StateBuilderStateSingleTickerMix#1aa60(ticker inactive)), library: widgets library
I/flutter (10993): error: _StateBuilderStateSingleTickerMix is a SingleTickerProviderStateMixin but multiple tickers were created.
I/flutter (10993): A SingleTickerProviderStateMixin can only be used as a TickerProvider once. If a State is used for multiple AnimationController objects, or if it is passed to other objects and those objects might use it more than one time in total, then instead of mixing in a SingleTickerProviderStateMixin, use a regular TickerProviderStateMixin.
I/flutter (10993): #0 SingleTickerProviderStateMixin.createTicker. (package:flutter/src/widgets/ticker_provider.dart:85:7)
I/flutter (10993): #1 SingleTickerProviderStateMixin.createTicker (package:flutter/src/widgets/ticker_provider.dart:92:6)
I/flutter (10993): #2 new AnimationController (package:flutter/src/animation/animation_controller.dart:245:21)
I/flutter (10993): #3 Animate.setController (package:animator/src/animate.dart:35:18)
I/flutter (10993): #4 StatesRebuilderWithAnimator.initAnimation (package:animator/src/states_rebuilder_with_animator.dart:54:14)
I/flutter (10993): #5 _AnimatorState.build. (package:animator/src/animator.dart:174:23)
I/flutter (10993): #6 _StateBuilderStateSingleTickerMix.build. (package:states_rebuilder/src/state_with_mixin_builder.dart)
I/flutter (10993): #7 _StateBuilderState.initState (package:states_rebuilder/src/state_builder.dart:146:42)
I/flutter (10993): #8 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4068:58)
I/flutter (10993): #9 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3919:5)
I/flutter (10993): #10 Element

all my animations are wrapped in this class:

import 'package:elm_bluetooth_bloc/model/units/unit.dart';
import 'package:flutter/material.dart';
import 'package:utilities/utilities.dart' show StreamValue;

class StreamAnimatorBuilder<T extends Unit> extends StatelessWidget {
  final StreamValue<T> streamValue;
  final Widget Function(double) builder;
  final Duration animationDuration;
  final Curve curve;

  StreamAnimatorBuilder(
      {@required this.streamValue,
      @required this.builder,
      this.animationDuration = const Duration(milliseconds: 250),
      this.curve = Curves.easeInOut});

  @override
  Widget build(BuildContext context) => StreamBuilder<T>(
        stream: streamValue.stream,
        initialData: null,
        builder: (context, snapshot) {
          Unit previous = streamValue.previousValue;
          double previousValue = double.parse(previous.value);
          Unit newValue = streamValue.value;
          double value = double.parse(newValue.value);

          if (snapshot.data == null ||
              snapshot.hasError ||
              previous == null ||
              newValue == null) {
            return Container();
          } else {

            //print("ANIMATION VALUES: $previousValue , $value");

            return Animator(
                resetAnimationOnRebuild: true,
                tween: Tween<double>(begin: previousValue, end: value),
                cycles: 1,
                duration: animationDuration,
                curve: curve,
                builder: (anim) => builder(anim.value));
          }
        },
      );
}

If I downgrade animator to 0.1.1 and stay on 1.9 I get this build errors:

Launching lib\main.dart on moto g 7 in debug mode...
Initializing gradle...
Resolving dependencies...
Running Gradle task 'assembleDebug'...
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)

Compiler message:
/C:/Users/ride4/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/animator-0.1.4/lib/animator.dart:494:27: Error: Method not found: 'StatesRebuilder.addToListeners'.
          StatesRebuilder.addToListeners(
                          ^^^^^^^^^^^^^^
/C:/Users/ride4/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/animator-0.1.4/lib/animator.dart:559:27: Error: Method not found: 'StatesRebuilder.removeFromListeners'.
          StatesRebuilder.removeFromListeners(b, widget.name, "$hashCode");
                          ^^^^^^^^^^^^^^^^^^^
Compiler failed on C:\Projects\obdchk\lib\main.dart
Finished with error: Gradle task assembleDebug failed with exit code 1

chain animation

How to implement a 2 second animation that translates in X direction for 1 second then translate in Y direction for 1second?

[Build error][iOS] Error merging methods with same name

Error for building for iOS device. Seems like dependency conflict with usage the same method. Consider updating name.


Compiler message:
../../Packages/flutter/.pub-cache/hosted/pub.dartlang.org/animator-1.0.0+3/lib/src/states_rebuilder_with_animator.dart:199:8: Error: The method
'StatesRebuilderWithAnimator.update' has fewer positional arguments than those of overridden method 'ObserverOfStatesRebuilder.update'.
  bool update([void Function(BuildContext) onRebuildCallBack]) {
       ^
../../Packages/flutter/.pub-cache/hosted/pub.dartlang.org/states_rebuilder-1.14.1/lib/src/states_rebuilder.dart:11:8: Context: This is the overridden method ('update').
  bool update([dynamic Function(BuildContext) onSetState, dynamic message]);
       ^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
Failed to build bundle.

gifatahth / animator Goto Github PK

animator's People

Contributors

Stargazers

Watchers

Forkers

animator's Issues

Staggered Animation

Recommend Projects

Recommend Topics

Recommend Org