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.

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 class-attribute instance-attribute

animate: bool = True

Whether the animation should be played automatically.

background_loading class-attribute instance-attribute

background_loading: bool | None = None

Whether the animation should be loaded in the background.

enable_layers_opacity class-attribute instance-attribute

enable_layers_opacity: bool = False

Whether to enable layer-level opacity.

enable_merge_paths class-attribute instance-attribute

enable_merge_paths: bool = False

Whether to enable merge path support.

error_content class-attribute instance-attribute

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 class-attribute instance-attribute

filter_quality: FilterQuality = LOW

The quality of the image layer.

fit class-attribute instance-attribute

fit: BoxFit | None = None

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

headers class-attribute instance-attribute

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

Headers for network requests.

repeat class-attribute instance-attribute

repeat: bool = True

Whether the animation should repeat in a loop.

Note

Has no effect if animate is False.

reverse class-attribute instance-attribute

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 class-attribute instance-attribute

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:

• ValueError –

  If neither src nor src_base64 is provided.

src_base64 class-attribute instance-attribute

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:

• ValueError –

  If neither src_base64 nor src is provided.

Events

on_error class-attribute instance-attribute

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.