pub.dev github likes popularity pub points license

buy me a coffee

If you like this package, please leave a like there on pub.dev and star on GitHub.

A widget to apply a crossfade animation between different states and/or widgets. It's more flexible than e.g. the official AnimatedCrossFade. Additionally it's really easy to use and efficient.

Easy Usage

CrossFade<int>(
    value: value,
    builder: (context, i) => Text('$i'),
)

Examples

cross_fade_example_1 cross_fade_example_2

It also animates between the different sizes of the widgets as you can see here:

cross_fade_example_3

So CrossFade can be wrapped in anything and it will animate its size along with it:

DecoratedBox(
    position: DecorationPosition.foreground,
    decoration: BoxDecoration(border: Border.all(width: 3.0)),
    child: CrossFade<int>(
        value: index,
        builder: (context, i) => widgets[i],
    ),
),

Libraries

cross_fade