Skip to main content

Lottie Animation

The LottieAnimation widget allows you to display Lottie files from uploaded assets or the URL link. Lottie files are high quality (they do 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.

Adding LottieAnimation​

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

  1. Getting Lottie files
  2. Adding LottieAnimation widget
  3. Changing animation source

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:

  1. Open https://lottiefiles.com/ and search for the required animation.
  2. Select the animation you would like to add. This will open a new popup.
  3. Click on the Download button and select Lottie JSON.

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:

  1. Open https://lottiefiles.com/ and search for the required animation.
  2. Select the animation you would like to add. This will open a new popup.
  3. Find the Lottie Animation URL (bottom right of the playing animation) and copy it.
info

The Lottie animation URL is only visible when you are logged in.

2. Adding LottieAnimation widget​

To add LottieAnimation widget to your project:

  1. Drag the LottieAnimation widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
  2. Move to the properties panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  3. Find the Path property and enter the URL (see how to get it 1.2) for the new Lottie file.
  4. 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.

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:

  1. Select the LottieAnimation widget from the widget tree or the canvas area.
  2. Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  3. Find the Animation Source dropdown and select .
  4. Now, find the Asset Animation property, click the Upload LottieAnimation button, select the Lottie file and upload it.

Customizing​

You can customize the appearance and behavior of this widget using the various properties available under 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:

  1. Select the LottieAnimation widget from the widget tree or the canvas area.
  2. Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  3. Find the Animation Type dropdown and select among the Once, Loop, and Boomerang.

Change frame rate​

By default, animations are played at the frame rate specified when they are exported from After Effects, usually at 10 or 30 FPS. Modern phones, however, can support higher refresh rates, such as 60 or 120 FPS. If you're not satisfied with how the animation looks at these default settings, you can adjust its frame rate to a smoother 60 FPS for better quality.

To do so, move to the properties panel > Lottie Animation > enter the value in the Frame Rate field.

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:

  1. Select the LottieAnimation widget from the widget tree or the canvas area.
  2. Move to the property panel (on the right side of your screen) and scroll down to the Lottie Animation section.
  3. Find the Box Fit dropdown, try changing the value among the Fill, Contain, Cover, Fit Width, Fit Height, None, and Scale Down.

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.

Adding Lottie Animation [Action]​

Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.

Follow the steps below to add this action to any widget.

  1. Select the Widget (e.g., Container, Button, etc.) on which you want to add the action.
  2. Select Actions from the Properties Panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
  3. Click on the + Add Action.
  4. On the right side, search and select Lottie Animation.
  5. Choose Lottie Animation from the dropdown.
  6. Enable Allow Play/Pause if you want to start and pause the animation while the animation is running. Note: You can only access this setting if the Auto Animate property of the LottieAnimation widget is unchecked. Note that this option is only available if you have set the animation type to either Loop or Boomerang.