Getting Started with the Flutter Player

In this tutorial, you will install the Flutter player and display your first Lottie animation in a Flutter application.

Requirements

Flutter >=3.3.0
Dart SDK ^3.9.2
Platforms: iOS, Android, macOS, Web, Windows, and Linux

Installation

Add dotlottie_flutter to your pubspec.yaml:

dependencies:
  dotlottie_flutter: ^0.1.4

Then run:

flutter pub get

Platform Setup

Android

To allow dotlottie-android to download, ensure you have JitPack in your build repositories:

maven { url = uri("https://jitpack.io") }

iOS & macOS — Swift Package Manager

The iOS and macOS native code is distributed as a Swift Package, which is the recommended way to consume the dependency. Enable Swift Package Manager once globally:

flutter config --enable-swift-package-manager

With it enabled, flutter run and flutter build resolve the Swift package automatically — no pod install step is required. Apps that have not enabled Swift Package Manager continue to build via CocoaPods as a fallback.

Windows

The Windows renderer uses the pre-built dotlottie_player.dll bundled with the plugin (x86_64 and ARM64 are both included). No additional setup is required — Flutter's cmake build copies the DLL into your app bundle automatically.

Linux

The Linux renderer uses the pre-built libdotlottie_rs.so bundled with the plugin (x86_64 and ARM64 are both included). No additional setup is required — Flutter's cmake build copies the shared library into your app bundle automatically.

:::warning[Ubuntu 24.04 note] If you are using clang 18 from the LLVM apt repository and encounter a type_traits build error, install libc++-dev:

sudo apt-get install libc++-dev libc++abi-dev

:::

Basic Usage

Load from a URL

import 'package:dotlottie_flutter/dotlottie_flutter.dart';

class AnimationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DotLottieView(
          source: 'https://lottie.host/example/animation.lottie',
          sourceType: 'url',
          autoplay: true,
          loop: true,
        ),
      ),
    );
  }
}

Load from an Asset

DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: true,
)

Load from JSON String

DotLottieView(
  source: myLottieJsonString,
  sourceType: 'json',
  autoplay: true,
)

Controlling Playback

Use DotLottieViewController to control playback programmatically. Obtain an instance via the onViewCreated callback:

class AnimationPage extends StatefulWidget {
  @override
  State<AnimationPage> createState() => _AnimationPageState();
}

class _AnimationPageState extends State<AnimationPage> {
  DotLottieViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DotLottieView(
          source: 'https://lottie.host/example/animation.lottie',
          sourceType: 'url',
          autoplay: false,
          loop: true,
          onViewCreated: (controller) {
            setState(() => _controller = controller);
          },
        ),
        Row(
          children: [
            ElevatedButton(
              onPressed: () => _controller?.play(),
              child: const Text('Play'),
            ),
            ElevatedButton(
              onPressed: () => _controller?.pause(),
              child: const Text('Pause'),
            ),
            ElevatedButton(
              onPressed: () => _controller?.stop(),
              child: const Text('Stop'),
            ),
          ],
        ),
      ],
    );
  }
}

Listening to Events

DotLottieView(
  source: 'animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: true,
  onLoad: () => print('Animation loaded'),
  onComplete: () => print('Animation complete'),
  onPlay: () => print('Playing'),
  onPause: () => print('Paused'),
  onStop: () => print('Stopped'),
  onFrame: (frame) => print('Frame: $frame'),
  onLoop: (loopCount) => print('Loop: $loopCount'),
  onLoadError: () => print('Load error occurred'),
)

Next Steps

API Reference — Full widget and controller API
Examples — Advanced usage examples