Swap animation not working as expected

[mikes222]

See the following code. When clicking at the icon while the icon shows a sun the animation works as expected (forward). But when clicking while the icon shows the moon the moon immediately vanishes without the specified duration and the sun fades in as expected.
In other words: The fadeIn() for the moon is not working in reverse direction together with swap().

flutter_animate: ^4.2.0+1

[√] Flutter (Channel stable, 3.16.0, on Microsoft Windows [Version 10.0.22621.2428], locale de-AT)
[√] Windows Version (Installed version of Windows is version 10 or higher)

bool light = true;

@override
Widget build(BuildContext context) {
return _icon(Icons.light_mode)
	.animate(target: light ? 0 : 1)
	.fadeOut(duration: 2.seconds)
	.swap(
		//duration: 2.seconds,
		builder: (BuildContext context, Widget? child) =>
			_icon(Icons.dark_mode).animate().fadeIn(duration: 2.seconds));
}


Widget _icon(IconData iconData) {
return InkWell(
  child: Icon(
	iconData,
	size: 50,
  ),
  onTap: () {
	setState(() {
	  light = !light;
	});
  },
);
}

[gskinner]

This is the expected behaviour, though I agree it can be a bit confusing. Working with complex, multi-target animations is something I'm still trying to think of a better way to manage.

Your code is creating two independent animations. The "outside" animation that is fading out the light_mode icon, which ends by swapping its child for the "inside" animation that fades in the dark_mode icon. You are only swapping the target of the outside animation, so only it is playing.

This fade out --> fade in use case is one of the trickier things to work with in Animate, and your need to swap content and run in reverse makes it even more complicated. :)

I'll think about this, and see if I can come up with an elegant approach either within the current framework, or perhaps informing an update to the library.

Even though this is working as intended, I am going to leave this issue open for additional exploration.

[mikes222]

Maybe something like

Widget Animation().swap(Widget icon1, Widget icon2, bool initialtarget, bool target);

which would be in my case:

Animation().swap(
    _icon(Icons.light_mode).animate().fadeOut(), 
    _icon(Icons.dark_mode).animate().fadeIn(), true, light ? true : false);

or a similar api with two builders. This may help since the programmer may not know which of the two is the initial widget. In my case the light/dark mode setting is stored in the properties so I need to add a bunch of code to the example in the first post to set the initial icon according to the current setting and the alternate icon respectively to the other option. This may be easier with the approach mentioned above.

[gskinner]

Check out #119 and see if the idea in there would address what you're trying to do. Closing this, but feel free to reopen as appropriate.