Lottie vs Rive.
What to use for Flutter?

1. Rive allows separately controlling at runtime different animation outputs from the same file:


_body = _controller.findInput('body-percent');
_mind = _controller.findInput('mind-percent');
_spirit = _controller.findInput('spirit-percent');

when Lottie just sets general animation value.

2. Rive allows changing shape colors at runtime:


FlutterActorShape shape = artboard.getNode("Hair1");
FlutterColorFill _fill = shape?.fill as FlutterColorFill;
_fill.uiColor = widget.theme.colorAccent;
FlutterActorShape shape2 = artboard.getNode("Hair2");
FlutterColorFill _fill2 = shape2?.fill as FlutterColorFill;
_fill2.uiColor = widget.theme.colorAccent;
FlutterActorShape shape3 = artboard.getNode("Hair3");
FlutterColorFill _fill3 = shape3?.fill as FlutterColorFill;
_fill3.uiColor = widget.theme.colorAccent;

Take a look at assistant hair color, it's changing depending on theme:

In terms of theming, this is a huge Rive advantage, without it, the whole animation file should be replaced, so the number of animation files with just color change would be equal to the number of themes. That leads to redundant storage consumption.

Both are running on every platform.

Initialization time and Flutter implementation are similar.

Animation files are NOT interchangeable (Lottie file can't be converted to Rive, and vise versa).

Don't miss the latest news. Subscribe to our newsletter!

Quick and Smooth Mobile App Launch
For Your Startup.

Peremohy Ave 24, Kyiv, Ukraine, 04116

Socials

Lottie vs Rive. What to use for Flutter?

1. Rive allows separately controlling at runtime different animation outputs from the same file:

2. Rive allows changing shape colors at runtime:

Lottie vs Rive.
What to use for Flutter?