Lottie Animation

The Lottie Animation widget plays vector animations from Lottie JSON files. It’s a powerful way to add smooth, high-quality animations to your app with small file sizes and scalable graphics that look sharp on all screen densities.

You can use it for success states, empty states, onboarding, loaders, and delightful micro-interactions throughout your app.

Use Cases

Use Lottie Animation when you want to:

• Delightful Loading & Empty States

  • Animated loaders instead of plain spinners

  • Fun illustrations for “No data”, “No internet”, or “Success” states

• Micro-interactions

  • Like/heart animations on tap

  • Button press, toggle, or success tick animations

  • Animated checkmarks, confetti, or subtle icon motions

• Onboarding & Walkthroughs

  • Animated visuals on onboarding screens

  • Feature highlights with motion to draw attention

• Branding & Visual Polish

  • Logo reveals, transitions, and branded animations

  • Animated headers or backgrounds to make screens feel premium

Core Concepts

The Lottie Animation widget:

• Loads a Lottie JSON file (vector animation) from:

  • A network URL, or

  • A local asset bundled with your app.

• Renders the animation as a widget with configurable width, height, and fit.

• Controls how and how long the animation plays using:

  • animate

  • animationType

  • frameRate

Since Lottie animations are vector-based:

• They stay crisp and smooth at any size.

• File sizes are much smaller than equivalent video or GIF.

• They’re ideal for modern, lightweight UI animations.

Properties

Property	Description
sourceType	The source of the Lottie file. Can be network (from a URL) or asset (from local project files).
lottiePath	The URL or asset path for the Lottie JSON file.
width	The width of the animation widget.
height	The height of the animation widget.
fit	How the animation should be inscribed into the widget's bounds (e.g., contain, cover).
alignment	The alignment of the animation within its bounds.
animate	If true, the animation will play automatically.
animationType	The playback mode: loop (repeats indefinitely), once (plays one time), or boomerang (plays forward then backward).
frameRate	The frame rate at which to play the animation.

Default Properties

The Lottie Animation widget supports all Default Properties.