dartnative_lottie

Play Lottie animations natively in DartNative — from a bundled asset, runtime JSON, or a URL — driven by Airbnb's Lottie engine. iOS and Android.

See it in action

Left, a grid of animated stickers scrolling fast, every cell playing. Right, the stickers keyboard: a chat with a sticker keyboard, packs loading and playing the moment they appear, and a sticker sent into the conversation.

This is the example app. The grid plays dozens of Lottie animations at once and stays smooth as you scroll; the stickers keyboard opens with its packs playing the moment they appear, and the sticker you pick plays in the conversation. Both demos are in the playground app, as Sticker Grid and Stickers Keyboard.

Why you'll like it

• The real Lottie engine — lottie-ios and lottie-android, so animations play through Core Animation / the Android view system (smooth, hardware-friendly).
• A frames renderer for the many — a sticker keyboard or a chat thread shows dozens of animations at once; renderCache: RenderCache.raster draws each once, off the main thread, and plays bitmaps. Every cell shows at once, a sticker plays what has been drawn while the rest is drawn behind it, and an animation seen before is read back rather than drawn, across launches.
• Three sources — bundled asset, runtime JSON string, or a remote URL (with caching).
• Play it your way — autoplay + loop, or drive it imperatively with a LottieController.

Highlights

• Lottie(asset: …) / Lottie(json: …) / Lottie(url: …) — the animation widget.
• loop, autoplay, speed, fit (LottieFit), and cachePolicy (LottieCachePolicy.disk / .none) inline.
• renderCache (RenderCache.none / .raster) — how the animation is drawn. none, the default, is the platform's animation engine: on iOS a layer tree built once per view and played by the render server with no per-frame work, right for a few animations on a screen and for large ones. raster is for many small animations at once: every frame is rendered once, off the main thread, at the size the widget shows it, kept compressed in memory and on disk, and played as bitmaps. A view costs nothing to build, and the main thread's share of playback is one bitmap per view per frame. An animation is rendered in order from its first frame, a few animations at a time: the ones on screen first, the highest on screen before the lower, so a grid completes the way it is read. A widget on an animation still being rendered shows its first frame at once, then plays the frames that exist and loops over them until the rest arrive, when it follows the clock; an animation that leaves the screen keeps rendering behind the ones that replaced it, so anything shown once ends up whole. Frames are kept compressed on disk for every animation, keyed by the file's contents so a reinstall finds them again, and in memory for the ones nobody is showing, up to 128 MB. Playback follows the file's frame rate up to the display's; scrubbing lands on the nearest frame. Same name and choice as the Flutter Lottie package. The same renderer on iOS and Android.
• LottieController — play() / pause() / stop() / setProgress(0..1) / setLoopMode(LottieLoopMode…), plus a progress ValueNotifier.
• LottieCache.preload([urls]) — warm .json / .zip / .lottie URLs ahead of time; watch LottieCache.progressStream.
• LottiePreWarm.warmAssets([paths], size: …, renderCache: …) — get bundled animations ready at the size they will show at, ahead of their first use. For RenderCache.raster it renders their frames ahead on both platforms, after anything on screen, so the first widget decodes instead of drawing. For the animation engine, iOS only, it builds each off-screen and keeps the built view for the first widget that shows it, on the same budgeted queue grid cells use, so warming a screen of stickers never stalls a frame.
• Every animation drawn in full: on iOS, lottie plays an animation through Core Animation, which costs nothing per frame. A few features are beyond Core Animation, such as a trim on a filled shape or an animated dash pattern; an animation that uses one plays on lottie's other engine instead, which draws every frame on the main thread. To find those files, turn on verbose logging: each one is named once in the log, with the feature. The frames renderer draws every feature.

Install

dependencies:
  dartnative_lottie: ^1.3.2   # from dartpub.dev

dn pub get

void main() {
  DartNativePluginRegistrant.registerAll();
  runApp(const MyApp());
}

Quick look

import 'package:dartnative_lottie/dartnative_lottie.dart';

Play a bundled animation on a loop:

Lottie(asset: 'assets/loading.json', loop: true);

From JSON fetched at runtime, a bit faster:

Lottie(json: jsonString, autoplay: true, speed: 1.5);

A sticker in a grid of thirty, frames rendered once and played as bitmaps:

Lottie(asset: 'assets/stickers/7.json', loop: true, renderCache: RenderCache.raster);

Drive it imperatively:

final controller = LottieController();

Lottie(asset: 'assets/check.json', autoplay: false, controller: controller);

// later…
controller.play();
controller.setProgress(0.5);

Platform setup

Assets and runtime JSON need no setup. Lottie(url: …) (and LottieCache.preload) fetch over the network:

iOS

Nothing for HTTPS. For an HTTP URL, add an App Transport Security exception in Info.plist.

Android

Requires minSdk 26 — set it in android/app/build.gradle.kts:

android { defaultConfig { minSdk = 26 } }

Add the internet permission to your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Example

The example/ app plays animations from each source and drives one with a controller — borrow from it freely.

Credits & license

Powered by Airbnb's Lottie — lottie-ios and lottie-android (Apache-2.0). The frames renderer draws with Samsung's rlottie (MIT, with parts under their own permissive licences) and, on Android, compresses frames with LZ4 (BSD 2-Clause); all reproduced in the plugin's THIRD_PARTY_NOTICES.

First-party DartNative plugin, free to use in any DartNative app. Distributed through dartpub.dev; report issues on the plugin's page.