FlutterFlow Docs
Search…
⌃K

LottieAnimation

The LottieAnimation widget allows you to display Lottie files from uploaded assets or the URL link. Lottie files are high quality (it does not pixelate), smaller than GIF, and easy to add to any platform.
For example, you could use the LottieAnimation widget to show a nicely animated loading indicator to provide a great user experience to the users.
LottieAnimation widget

Adding LottieAnimation

Showing Lottie files in a LottieAnimation widget comprises the following steps:

1. Getting Lottie files

The LottieAnimation requires the Lottie file to be added to display the animation on the screen. You can get the Lottie files from its official collection in two ways.

1.1 Downloading the Lottie JSON file

The Lottie JSON file is required when you want to play the animation from the file uploaded to your project.
To download the Lottie JSON file:
  • Open https://lottiefiles.com/ and search for the required animation.
  • Select the animation you would like to add. This will open a new popup.
  • Click on the Download button and select Lottie JSON.
Downloading the Lottie JSON file

1.2 Copying Lottie animation URL

The Lottie animation URL is required when you want to play the animation from the file hosted at https://lottiefiles.com/.
To copy the animation URL:
  • Open https://lottiefiles.com/ and search for the required animation.
  • Select the animation you would like to add. This will open a new popup.
  • Find the Lottie Animation URL (bottom right of the playing animation) and copy it.
The Lottie animation URL is only visible when you are logged in.
Copying Lottie animation URL

2. Adding LottieAnimation widget

To add LottieAnimation widget to your project:
  • Drag the LottieAnimation widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  • Find the Path property and enter the URL (see how to get it 1.2) for the new Lottie file.
  • By default, the animation will play as soon as the page loads. To disable this and play animation on a button click or any other event, uncheck the Auto Animate checkbox.
Adding LottieAnimation widget

3. Changing animation source

By default, the widget's animation source is set to network. However, you can change this to use a Lottie file uploaded directly to your app.
Here's how you can change the animation source:
  • Select the LottieAnimation widget from the widget tree or the canvas area.
  • Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  • Find the Animation Source dropdown and select .
  • Now, find the Asset Animation property, click the Upload LottieAnimation button, select the Lottie file and upload it.
Changing animation source

Customizing

You can change the behavior of the LottieAnimation widget using the properties available inside the Properties Panel.

Changing animation type

You can control how the animation is played, whether it should play only once, in a loop, or in a boomerang fashion (play back and forth).
To control the animation type:
  • Select the LottieAnimation widget from the widget tree or the canvas area.
  • Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  • Find the Animation Type dropdown and select among the Once, Loop, and Boomerang.
Once
Loop
Boomerang
Animation Type: Once
Animation Type: Loop
Animation Type: Boomerang

Changing size

To change the height and width of the LottieAnimation widget:
  • Select the LottieAnimation.
  • Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  • Find the Width and Height.
  • There are two ways to set the size:
    • To set it to an exact size, select PX and enter the desired values.
    • To set the dimensions as a % of the screen size, select % and enter the desired value.
The LottieAnimation inside of the container is constrained by the dimensions of the container. If you want to increase the LottieAnimation widget's size, you will also need to increase the container size.
Changing size

Changing the box fit

Changing the Box Fit value allows you to control how the Lottie file animation should display inside the LottieAnimation widget. Various options under the Box Fit property help you scale (grow or shrink in size) the Lottie file animation inside the LottieAnimation widget.
To change the Box Fit value:
  • Select the LottieAnimation widget from the widget tree or the canvas area.
  • Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  • Find the Box Fit dropdown, try changing the value among the Fill, Contain, Cover, Fit Width, Fit Height, None, and Scale Down.
Changing the box fit

Add padding

Here are the instructions on how to add padding.

Adjust the alignment

Here are the instructions on adjusting the alignment.

Start/pause animation on button press

You probably want to start or pause the animation when something happens in your app. For example, after saving the form, while data is loading, searching, etc. You can do this by triggering the Lottie Animation action.
Learn more about adding the Lottie Animation action on the page below:

Show/Hide widget

Please find the instructions to show/hide the widget here.
Last modified 4mo ago