How Fish‑Lottie Brings High‑Performance Lottie Animations to Flutter and Android

Background

Lottie is an open‑source animation solution from Airbnb that uses JSON to reduce development cost for complex animations across Android, iOS, Web and other platforms.

Project Architecture

After studying the official lottie‑android library, the Xianyu team built a pure‑Dart package that provides complete, high‑performance Lottie support for Flutter. The architecture consists of a base module, an interface layer and a component layer, supporting vector graphics, fills, strokes and other capabilities similar to lottie‑android.

Base Module

The base module interacts directly with Flutter SDK capabilities. It includes data‑model, animation‑rendering, data‑parsing and utility modules. JSON animation files are parsed into a LottieComposition object, which is then handed to the rendering module.

Interface Layer

The interface layer receives JSON data, creates a LottieComposition, passes it to LottieDrawable, which forwards it to the rendering module. LottieDrawable drives drawing and refresh based on animation progress.

Component Layer

Developers create a LottieAnimationView widget, provide the JSON path (asset, URL or file), and optionally an AnimationController, width, height, alignment, etc., to embed the animation in the Flutter UI.

@override
void paint(PaintingContext context, Offset offset) {
  if (_drawable == null) return;
  _drawable.draw(context.canvas, offset & size,
      fit: _fit, alignment: _alignment);
}
// RenderLottie paint method

Workflow

Designers create layers in After Effects, export to JSON via BodyMovin, then the framework parses the JSON, builds a composition, and uses AnimationBuilder to drive progress, causing the drawable to repaint each frame.

Rendering and Playback

AnimationBuilder

updates AnimationController.value, which sets LottieDrawable.progress, triggers repaint, and the drawable draws each layer according to the current keyframe values.

Differences

Compared with existing third‑party solutions, fish‑lottie avoids flicker and supports text animation, offering performance comparable to native lottie‑android.

Future Outlook – From Static to Interactive

Interactive capabilities such as dynamic property control (e.g., color changes via KeyPath) are being added. A PropertiesController will replace the Android‑style addValueCallback, enabling complex interactive animations driven by user input.

val shirt = KeyPath("Shirt", "Group 5", "Fill 1")
animationView.addValueCallback(shirt, LottieProperty.COLOR) { Colors.XXX }
// Dynamic color change on Android

interpolator = PathInterpolator.cubic(cp1.dx, cp1.dy, cp2.dx, cp2.dy);
// Flutter cubic Bézier interpolator