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.

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, so a grid fills at once and a pack seen before costs nothing.
• 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, an animation seen before at that size decodes instead of drawing, and the main thread's share of playback is one bitmap per view per frame. 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, below the priority of 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.
• One warning per file that the engine approximates — iOS renders through Core Animation, which simplifies a few features (a trim on a filled shape, an animated dash pattern). A file with such layers is named once in the log, whether or not logging is verbose, with the count of layers concerned. It still plays at full speed; the line tells you which asset to check. The frames renderer draws every feature as written.

Install

dependencies:
  dartnative_lottie: ^1.2.1   # 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.

Commercial plugin distributed via dartpub.dev — file issues on the plugin's page.