Lottie

The Lottie widget plays Lottie JSON animation files as vectors.
Use it to show lightweight vector animations on screen, such as loading spinners, icon motion, and illustrated animations.

Definition and role

The Lottie widget loads a Lottie JSON animation and plays it in the area you specify. Pick the source from an asset (a file bundled with the app), a file (a device path), or the network (a URL). You can also set autoplay, looping, reverse playback, frame rate, size, and fit.

• Category: Contents
• Default source type: asset
• Default behavior: autoplay + loop
• Default size (SizedBox): 300 wide, 150 tall

Features

Feature	Description
Source selection	Pick the Lottie JSON source to play from an asset, a file, or the network (URL).
Playback control	Set autoplay, looping, and reverse playback.
Frame rate	Set the playback speed in fps. Leave it empty to use the value stored in the JSON file.
Size and fit	Set the width and height, plus the fit mode and alignment inside that area.

How to use

1. Open the Contents category in the left widget palette.
2. Drag the Lottie item onto the canvas. (A default sample animation appears.)
3. In the properties panel on the right, choose the source type (src) and enter the path or URL (name).
4. Adjust autoplay (animate), looping (repeat), reverse playback (reverse), frame rate (frameRate), and size as needed.

Properties

Property	Description	Default	Value / Type
src	Where the animation source lives	asset	asset, file, network (URL)
name	Asset path, file path, or network URL of the Lottie JSON to play	Empty	String
animate	Whether to play automatically once loaded	true	true / false
frameRate	Playback frame rate in fps. Leave empty to use the JSON value	Not set	Number (minimum 1)
repeat	Whether playback loops when it finishes	true	true / false
reverse	Whether to play in reverse	false	true / false
Size	Display size - a grouped property that sets width and height together	Not set	Size (width and height, Number in px)
fit	How the animation fits inside the size you set	Not set	fill, contain, cover, fitWidth, fitHeight, none, scaleDown
alignment	Alignment inside the area	Not set (center)	Alignment value

Notes and tips

tip

Leave frameRate empty and the widget uses the frame rate stored in the Lottie JSON file. Change the source and the value may refresh automatically to match the new file.

warning

When the source path (name) is empty, the default sample animation appears instead. If the path or URL is wrong, or the file can't be found, an error message appears.

Learn more

tip

For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit Lottie Widget Control.