I am trying to fade out a button if I don't have to show it.

Am I doing something wrong?

This is the code:

GetBuilder<SessionController>(builder: (sessionController) {

  if (widget.plan.participantsIds.contains(sessionController.loggedUserId)) {
    print("IN");
    return FadeIn(
      duration: kThemeAnimationDuration * 2,
      child: Bounce (
        child: ChatButton(plan: widget.plan),
        duration: kThemeAnimationDuration * 4.5,

      ),
    );
  } else if (!widget.plan.participantsIds.contains(sessionController.loggedUserId)) {
    print("OUT");

    return ZoomOut(
      child: ChatButton(plan: widget.plan),
    );
    //
  }

  print("ERROR");
  return const SizedBox.shrink();

})

I am using Get for state management.

The FadeIn works, and changing the FadeOut for ZoomOut works too, however, any of the FadeOuts seems to work. The prints work as expected.

Hi getting below when iam jumping between tab ,

i have 3 tabs, second tab has FadeInUp(child:widget)

now iam in tab 1 and iam moving to tab 3 getting below in logs

E/flutter (24189): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 456 pos 7: '_ticker != null': AnimationController.forward() called after AnimationController.dispose() E/flutter (24189): AnimationController methods should not be used after calling dispose. E/flutter (24189): #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) E/flutter (24189): #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) E/flutter (24189): #2 AnimationController.forward (package:flutter/src/animation/animation_controller.dart:456:7) E/flutter (24189): #3 _FadeInUpState.initState. (package:animate_do/animate_do.dart:283:54) E/flutter (24189): #4 new Future.delayed. (dart:async/future.dart:326:39) E/flutter (24189): #5 _rootRun (dart:async/zone.dart:1182:47) E/flutter (24189): #6 _CustomZone.run (dart:async/zone.dart:1093:19) E/flutter (24189): #7 _CustomZone.runGuarded (dart:async/zone.dart:997:7) E/flutter (24189): #8 _CustomZone.bindCallbackGuarded. (dart:async/zone.dart:1037:23) E/flutter (24189): #9 _rootRun (dart:async/zone.dart:1190:13) E/flutter (24189): #10 _CustomZone.run (dart:async/zone.dart:1093:19) E/flutter (24189): #11 _CustomZone.bindCallback. (dart:async/zone.dart:1021:23) E/flutter (24189): #12 Timer._createTimer. (dart:async-patch/timer_patch.dart:18:15) E/flutter (24189): #13 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:397:19) E/flutter (24189): #14 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:428:5) E/flutter (24189): #15 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12) E/flutter (24189): E/flutter (24189): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 456 pos 7: '_ticker != null': AnimationController.forward() called after AnimationController.dispose() E/flutter (24189): AnimationController methods should not be used after calling dispose. E/flutter (24189): #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) E/flutter (24189): #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) E/flutter (24189): #2 AnimationController.forward (package:flutter/src/animation/animation_controller.dart:456:7) E/flutter (24189): #3 _FadeInUpState.initState. (package:animate_do/animate_do.dart:283:54) E/flutter (24189): #4 new Future.delayed. (dart:async/future.dart:326:39) E/flutter (24189): #5 _rootRun (dart:async/zone.dart:1182:47) E/flutter (24189): #6 _CustomZone.run (dart:async/zone.dart:1093:19) E/flutter (24189): #7 _CustomZone.runGuarded (dart:async/zone.dart:997:7) E/flutter (24189): #8 _CustomZone.bindCallbackGuarded. (dart:async/zone.dart:1037:23) E/flutter (24189): #9 _rootRun (dart:async/zone.dart:1190:13) E/flutter (24189): #10 _CustomZone.run (dart:async/zone.dart:1093:19) E/flutter (24189): #11 _CustomZone.bindCallback. (dart:async/zone.dart:1021:23) E/flutter (24189): #12 Timer._createTimer. (dart:async-patch/timer_patch.dart:18:15) E/flutter (24189): #13 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:397:19) E/flutter (24189): #14 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:428:5) E/flutter (24189): #15 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12) E/flutter (24189): W/IInputConnectionWrapper(24189): getExtractedText on inactive InputConnection W/IInputConnectionWrapper(24189): getTextBeforeCursor on inactive InputConnection

I don't know if it's just me but both on android emulator and on smartphone (galaxy s7), animations are not smooth. This is just about testing (so fix with deployment) or is a problem?

When changing opacity in animations, it is much more performant to use FadeTransition instead of a re-building Opacity. See “Performance considerations for opacity animation” in https://api.flutter.dev/flutter/widgets/Opacity-class.html.

I also made changes to animate_do_fades and animate_do_fadeouts to use SlideTransition instead of Transform.translate. This lets us get rid of AnimatedBuilder altogether.

This could be replicated in other files as well, but I ran out of time.

Hi !

The behaviour I see is strange and somewhat hard to explain. I couldn't find a way to isolate the components that might cause this, so it has to be explained in the context of an entire project.

Please, bear with me.

The way I'm using animate_do, is by creating "Animation Styles" like this:

import 'package:flutter/material.dart';

class AnimStyle {
  const AnimStyle(this.type, this.duration, this.from, this.color);

  final Duration? duration;
  final int type;
  final double? from;
  final Color color;
}

Then I use another part of the code to wrap the animated widget:

import 'package:anim_do_issue/anim_style.dart';
import 'package:anim_do_issue/glob_utils.dart';
import 'package:animate_do/animate_do.dart';
import 'package:flutter/material.dart';

Widget animBuild(Widget toAnimate, AnimStyle animStyle, int delayId) {
  Duration delay = Global.getDelay(delayId);

  debugPrint("Here is the delay now ->${delay.toString()}");
  switch (animStyle.type) {
    case 0:
      return FadeIn(
        duration: animStyle.duration ?? const Duration(milliseconds: 300),
        delay: delay,
        child: toAnimate,
      );
    case 1:
      return FadeInDown(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 2:
      return FadeInDownBig(
        from: animStyle.from ?? 600,
        duration: animStyle.duration ?? const Duration(milliseconds: 1300),
        delay: delay,
        child: toAnimate,
      );
    case 3:
      return FadeInUp(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 4:
      return FadeInUpBig(
        duration: animStyle.duration ?? const Duration(milliseconds: 1300),
        from: animStyle.from ?? 600,
        delay: delay,
        child: toAnimate,
      );
    case 5:
      return FadeInLeft(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 6:
      return FadeInLeftBig(
        duration: animStyle.duration ?? const Duration(milliseconds: 1300),
        from: animStyle.from ?? 600,
        delay: delay,
        child: toAnimate,
      );
    case 7:
      return FadeInRight(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        delay: delay,
        from: animStyle.from ?? 100,
        child: toAnimate,
      );
    case 8:
      return FadeInRightBig(
        duration: animStyle.duration ?? const Duration(milliseconds: 1200),
        delay: delay,
        from: animStyle.from ?? 600,
        child: toAnimate,
      );
    case 9:
      return BounceInDown(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        delay: delay,
        from: animStyle.from ?? 75,
        child: toAnimate,
      );
    case 10:
      return BounceInUp(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 75,
        delay: delay,
        child: toAnimate,
      );
    case 11:
      return BounceInLeft(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 75,
        delay: delay,
        child: toAnimate,
      );
    case 12:
      return BounceInRight(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 75,
        delay: delay,
        child: toAnimate,
      );
    case 13:
      return ElasticIn(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        delay: delay,
        child: toAnimate,
      );
    case 14:
      return ElasticInDown(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 200,
        delay: delay,
        child: toAnimate,
      );
    case 15:
      return ElasticInUp(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 200,
        delay: delay,
        child: toAnimate,
      );
    case 16:
      return ElasticInLeft(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 200,
        delay: delay,
        child: toAnimate,
      );
    case 17:
      return ElasticInRight(
        duration: animStyle.duration ?? const Duration(milliseconds: 1000),
        from: animStyle.from ?? 200,
        delay: delay,
        child: toAnimate,
      );
    case 18:
      return SlideInDown(
        duration: animStyle.duration ?? const Duration(milliseconds: 600),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 19:
      return SlideInUp(
        duration: animStyle.duration ?? const Duration(milliseconds: 600),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 20:
      return SlideInLeft(
        duration: animStyle.duration ?? const Duration(milliseconds: 600),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 21:
      return SlideInRight(
        duration: animStyle.duration ?? const Duration(milliseconds: 600),
        from: animStyle.from ?? 100,
        delay: delay,
        child: toAnimate,
      );
    case 22:
      return FlipInX(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        delay: delay,
        child: toAnimate,
      );
    case 23:
      return FlipInY(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        delay: delay,
        child: toAnimate,
      );
    case 24:
      return ZoomIn(
        duration: animStyle.duration ?? const Duration(milliseconds: 500),
        delay: delay,
        from: animStyle.from ?? 1.0,
        child: toAnimate,
      );
    case 25:
      return JelloIn(
        duration: animStyle.duration ?? const Duration(milliseconds: 800),
        delay: delay,
        child: toAnimate,
      );
    default:
      return FadeIn(
        duration: animStyle.duration ?? const Duration(milliseconds: 300),
        delay: delay,
        child: toAnimate,
      );
  }
}

The issue I'm having comes from the delays. This is what the function computing the delays looks like:

  class Global {
  factory Global() {
    return _singleton;
  }
  Global._internal();

  static final Global _singleton = Global._internal();

  static final List<int> _delays = [0, 100, 0, 100, 0, 100, 0, 100];

  static Duration getDelay(int id) {
    _delays[id]++;
    // return Duration(milliseconds: _delays[id] * _delays[id + 1]); // broken !
    return Duration(seconds: _delays[id]);
  }

  static void resetDelay(int id, int delayFactor) {
    _delays[id] = 0;
    _delays[id + 1] = delayFactor;
  }
}

The idea is to animate every element of the screen with a specific delay factor (by default, 100 msec). I can pass a delay ID value 0, 2, 4 or 6 to the animStyle.build call, which will then call the Global.getDelay(delayId) which will increase the number of delayed elements and give me the delay for that specific element in the page.

When I run this idea in a simplified project like this:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  List<AnimStyle> _toAnimate = [
    AnimStyle(7, null, null, Colors.indigo),
    AnimStyle(22, null, null, Colors.red),
    AnimStyle(12, null, null, Colors.green),
    AnimStyle(17, null, null, Colors.pink),
  ];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: _createFromStyle(_toAnimate),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  List<Widget> _createFromStyle(List<AnimStyle> toAnimate) {
    final toReturn = <Widget>[];
    for (var i = 0; i < toAnimate.length; i++) {
      toReturn.add(animBuild(_getContainer(toAnimate[i].color), toAnimate[i], 0));
    }

    return toReturn;
  }

  Widget _getContainer(Color color) {
    return Container(
      height: 50,
      width: 50,
      color: color,
    );
  }
}

The result is exactly what is expected:

https://user-images.githubusercontent.com/86661185/170222582-30c622d6-7a58-48ef-b927-19bf6eb61b04.mov

When printing the values of the final delay = Global.getDelay(delayId) this is seen in the console:

I/flutter (20459): Here is the delay now ->0:00:01.000000
I/flutter (20459): Here is the delay now ->0:00:02.000000
I/flutter (20459): Here is the delay now ->0:00:03.000000
I/flutter (20459): Here is the delay now ->0:00:04.000000

Exactly what we see on the screen. So far, so good.

However, when this rather simple idea is merged within the rest of the project, then the delays given by Global.getDelay() seem to be ignored and the LAST delay is applied to ALL elements.

My animations look like this instead:

https://user-images.githubusercontent.com/86661185/170224139-fce51749-0bac-4a34-abc3-3dff2bb53a71.mov

When printing the values of the final delay = Global.getDelay(delayId) this is what's logged:

I/flutter (22042): Here is the delay now ->0:00:00.000000
I/flutter (22042): Here is the delay now ->0:00:01.000000
I/flutter (22042): Here is the delay now ->0:00:02.000000
I/flutter (22042): Here is the delay now ->0:00:03.000000

But this is not what we see. There is actually no delay of 0, 1, 2 and 3 seconds between the displayed elements. They are all having a 3 seconds delay (ea. the maximum or the last value).

I hope I managed to explain the behaviour...

I am not sure if animate_do or dart or flutter could cause this, but I decided to start here. Is there any reason to believe that animate_do could cause this?

If you have ideas or workarounds or anything else to try to fix this, I'll take it. I'm desperate at this point.

Thank you !

Fix some details:

• [X] Migration details fix for null safety
• [X] Removing the call to the controller from the build method
• [X] Add Key key declaration to constructor
• [X] Adding flutter_lints (can be changed for your preferred one I just set like default one) improving code quality

This work was done only at animate_do_attention_seekers.dart if you find this can help you out you can replicate it to other classes I just made a quick review and fixes.

Hope this helps!!! 😃

• Acabo de caer en cuenta que escribi en inglés jaja una disculpa, la costumbre.

How can I use FadeOut animations? FadeIn works correctly. I am trying to replace FadeIn with FadeOut just for fun but with FadeOut anything happens with Square container (like the example).

Example:

...
FadeOut(
 child: Square(),
),
...

Emulator: Pixel 4 XL API 29

EDIT: Also animations that support infinite property don't animate in loop (infinite: true) unless I add the delay property. Bug?

UPDATE: FadeOut animations work if I set "animate" property to true.

...
FadeOutRightBig(
 child: Square(),
 animate: true,
),
...

Hi,

I want to make like "SlideInRight" effect to show some widget, something like "SlideOutRight" to hide same widget.

There are a way to do that ?

Thanks a lot.

Hi, I'm noticing when I use the fade in down animation stutters around 500ms into the animation (when the duration is 1000ms). The current way I'm getting around it is to have the delay set at 550ms and then starting the animation, this seems to avoid the stutter, but ideally I would have the animation load as soon as possible. The stutter is reproducible 100% on my production and debug builds on Flutter 1.20. Would it be possible to fix this?

Does animate_do support dart null safety?

@Klerith , could you add a CONTRIBUTE.md file to encourage the community to do PR's and help you with de maintenance of the library.

Visibility is true: ZoomIn/FadeInDown animation for the widget Visibility is false: Zoom Out/FadeInUp animation for the same widget like dialog open close animation is this possible?

All Attention Seekers stopped playing after a rebuild, because the infinite flag was only checked in the initState method, but not in the build method.

This PR adds a check for the bool infinite in the build method for all attention seekers.

This PR exposes new from and to values for the Pulse attention seeker animation. This allows controlling the begin and end value of the tween.

This change is not a breaking and in addition, it does not change any current behaviour as the default values remain equal to the previous constant values.

hi

1. add property 'to' to distinct between from & to (issue when use zoom effect, i prefer from=initZoom to=finalZoom)

2. apply animations in parallel (ex: fade + zoom + ... )

3. handle animations events (begin, end, pause, resume)

hi thanks for this excellent packages

are you have plan for support group children widgets? for example : ListView GridView Column Row

like these packages : auto_animated flutter_staggered_animations