marcglasberg/animated_size_and_fade

Pub popularity Pub Version GitHub stars Code Climate issues GitHub closed issues GitHub repo size GitHub forks PRs Welcome Developed by Marcelo Glasberg Glasberg.dev on pub.dev Platforms

Sponsor

https://raw.githubusercontent.com/marcglasberg/animated_size_and_fade/HEAD/example/SponsoredByMyTextAi.png

animated_size_and_fade

The AnimatedSizeAndFade widget allows you to:

Do a fade and size transition between two widgets.
Show and hide a widget, by resizing it vertically while fading.

https://github.com/marcglasberg/animated_size_and_fade/blob/master/example/lib/animated_size_and_fade.gif?raw=true

Size and Fade

To do a fade and size transition when you change the child widget, the "old" and the "new" child must have the same width, but can have different heights, and you don't need to know their sizes in advance.

You can also define a duration and curve for both the fade and the size, separately.

Important: If the "new" child is the same widget type as the "old" child, but with different parameters, then AnimatedSizeAndFade will NOT do a transition between them, since as far as the framework is concerned, they are the same widget, and the existing widget can be updated with the new parameters. To force the transition to occur, set a Key (typically a ValueKey taking any widget data that would change the visual appearance of the widget) on each child widget that you wish to be considered unique.

Example:

bool toggle=true;
Widget widget1 = ...;
Widget widget2 = ...;

AnimatedSizeAndFade(
   child: toggle ? widget1 : widget2
);

Show and Hide

The AnimatedSizeAndFade.showHide constructor may be used to show/hide a widget, by resizing it vertically while fading.

Example:

bool toggle=true;
Widget widget = ...;    

AnimatedSizeAndFade.showHide(
   show: toggle,
   child: widget,
);

How does it compare to other similar widgets?

With AnimatedCrossFade you must provide both the firstChild and secondChild at the same time, but with AnimatedSizeAndFade you may simply change its child.
With AnimatedSwitcher you may simply change its child, but then it only animates the fade, not the size.
AnimatedContainer only works if you know the size of the children in advance.