Skip to main content

Lottie

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

It is backed by the lottie Flutter package.

Platform Support​

PlatformWindowsmacOSLinuxiOSAndroidWeb
Supported✅✅✅✅✅✅

Usage​

Add the flet-lottie package to your project dependencies:

uv add flet-lottie

Example​

Lottie animations​

play_arrowTry Online
import flet as ft
import flet_lottie as ftl


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    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}"),
                    ),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Description​

Displays lottie animations.

Note

Inherits: LayoutControl

Properties

  • animate - Whether the animation should be played automatically.
  • background_loading - Whether the animation should be loaded in the background.
  • enable_layers_opacity - Whether to enable layer-level opacity.
  • enable_merge_paths - Whether to enable merge path support.
  • error_content - A control to display when an error occurs while loading the Lottie animation.
  • filter_quality - The quality of the image layer.
  • fit - Defines how to inscribe the Lottie composition into the space allocated during layout.
  • headers - Headers for network requests.
  • repeat - Whether the animation should repeat in a loop.
  • reverse - Whether the animation should be played in reverse (from start to end and then continuously from end to start).
  • src - The lottie animation source.

Events

  • on_error - Fires when an error occurs while loading the Lottie animation.

Properties​

animateclass-attributeinstance-attribute​

animate: bool = True

Whether the animation should be played automatically.

background_loadingclass-attributeinstance-attribute​

background_loading: bool | None = None

Whether the animation should be loaded in the background.

enable_layers_opacityclass-attributeinstance-attribute​

enable_layers_opacity: bool = False

Whether to enable layer-level opacity.

enable_merge_pathsclass-attributeinstance-attribute​

enable_merge_paths: bool = False

Whether to enable merge path support.

error_contentclass-attributeinstance-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_qualityclass-attributeinstance-attribute​

filter_quality: FilterQuality = FilterQuality.LOW

The quality of the image layer.

fitclass-attributeinstance-attribute​

fit: BoxFit | None = None

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

headersclass-attributeinstance-attribute​

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

Headers for network requests.

repeatclass-attributeinstance-attribute​

repeat: bool = True

Whether the animation should repeat in a loop.

Note

Has no effect if animate is False.

reverseclass-attributeinstance-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.

srcinstance-attribute​

src: str | bytes

The lottie animation source.

It can be one of the following:

  • A URL or local asset file path;
  • A base64 string;
  • Raw bytes.

Events​

on_errorclass-attributeinstance-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.