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

Installation

Add dotlottie_flutter to your pubspec.yaml:

dependencies:
  dotlottie_flutter: ^0.0.2

Then run:

flutter pub get

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