Lottie

Render rich Lottie animations inside your Flet apps with a simple control.

It is backed by the lottie Flutter package.

Platform Support

Platform	Windows	macOS	Linux	iOS	Android	Web
Supported	✅	✅	✅	✅	✅	✅

Usage

Add the flet-lottie package to your project dependencies:

uvpip

uv add flet-lottie

pip install flet-lottie  # (1)!

1. After this, you will have to manually add this package to your requirements.txt or pyproject.toml.

[!TIP] Lottie is a visual control—place it wherever any other widget goes and configure playback via its properties.

Example

import flet_lottie as ftl

import flet as ft


def main(page: ft.Page):
    page.add(
        ftl.Lottie(
            src="https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json",
            reverse=False,
            animate=True,
            error_content=ft.Placeholder(ft.Text("Error loading Lottie")),
            on_error=lambda e: print(f"Error loading Lottie: {e.data}"),
        ),
        ftl.Lottie(
            src="sample.json",
            reverse=False,
            animate=True,
            enable_merge_paths=True,
            enable_layers_opacity=True,
            error_content=ft.Placeholder(ft.Text("Error loading Lottie")),
            on_error=lambda e: print(f"Error loading Lottie: {e.data}"),
        ),
    )


ft.run(main)

Description

Inherits: LayoutControl

Displays lottie animations.

Properties

• animate(bool) –

  Whether the animation should be played automatically.

• background_loading(bool | None) –

  Whether the animation should be loaded in the background.

• enable_layers_opacity(bool) –

  Whether to enable layer-level opacity.

• enable_merge_paths(bool) –

  Whether to enable merge path support.

• error_content(Control | None) –

  A control to display when an error occurs

• filter_quality(FilterQuality) –

  The quality of the image layer.

• fit(BoxFit | None) –

  Defines how to inscribe the Lottie composition

• headers(dict[str, str] | None) –

  Headers for network requests.

• repeat(bool) –

  Whether the animation should repeat in a loop.

• reverse(bool) –

  Whether the animation should be played in reverse

• src(str | None) –

  The source of the Lottie file.

• src_base64(str | None) –

  The base64 encoded string of the Lottie file.

Events

• on_error(ControlEventHandler[Lottie] | None) –

  Fires when an error occurs while loading the Lottie animation.

Properties

animate

animate: bool = True

Whether the animation should be played automatically.

background_loading

background_loading: bool | None = None

Whether the animation should be loaded in the background.

enable_layers_opacity

enable_layers_opacity: bool = False

Whether to enable layer-level opacity.

enable_merge_paths

enable_merge_paths: bool = False

Whether to enable merge path support.

error_content

error_content: Control | None = None

A control to display when an error occurs while loading the Lottie animation.

For more information on the error, see on_error.

filter_quality

filter_quality: FilterQuality = LOW

The quality of the image layer.

fit

fit: BoxFit | None = None

Defines how to inscribe the Lottie composition into the space allocated during layout.

headers

headers: dict[str, str] | None = None

Headers for network requests.

repeat

repeat: bool = True

Whether the animation should repeat in a loop.

Note

Has no effect if animate is False.

reverse

reverse: bool = False

Whether the animation should be played in reverse (from start to end and then continuously from end to start).

Note

Has no effect if animate or repeat is False.

src

src: str | None = None

The source of the Lottie file.

Can be a URL or a local asset file.

Note

If both src and src_base64 are provided, src_base64 will be prioritized/used.

Raises:

• AssertionError –

  If neither src nor src_base64 is provided.

src_base64

src_base64: str | None = None

The base64 encoded string of the Lottie file.

Note

If both src_base64 and src are provided, src_base64 will be prioritized/used.

Raises:

• AssertionError –

  If neither src nor src_base64 is provided.

Events

on_error

on_error: ControlEventHandler[Lottie] | None = None

Fires when an error occurs while loading the Lottie animation.

The data property of the event handler argument contains information on the error.