Getting Started

This guide will help you install dotLottie Flutter and create your first animation.

Installation

Add dotLottie Flutter to your project with Flutter:

flutter pub add dotlottie-flutter

This will add a line to your package’s pubspec.yaml and run an implicit flutter pub get.

Import

Import it in your Dart code:

import 'package:dotlottie_flutter/dotlottie_flutter.dart';

Quick Start

Here’s a complete example to get you started with a basic animation:

import 'package:flutter/material.dart';
import 'package:dotlottie_flutter/dotlottie_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DotLottieViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('dotLottie Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // DotLottie animation view
              SizedBox(
                width: 300,
                height: 300,
                child: DotLottieView(
                  sourceType: 'url',
                  source: 'https://lottie.host/your-animation.lottie',
                  autoplay: true,
                  loop: true,
                  onViewCreated: (controller) {
                    _controller = controller;
                  },
                  onLoad: () {
                    print('Animation loaded!');
                  }
                ),
              ),

              const SizedBox(height: 20),

              // Basic playback controls
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () => _controller?.play(),
                    child: const Text('Play'),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () => _controller?.pause(),
                    child: const Text('Pause'),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () => _controller?.stop(),
                    child: const Text('Stop'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Source Types

dotLottie Flutter supports three source types:

URL Source

Load animations from a remote URL:

DotLottieView(
  sourceType: 'url',
  source: 'https://lottie.host/your-animation.lottie',
  autoplay: true,
  loop: true,
)

Asset Source

Load animations from your app’s assets:

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

Make sure to declare the asset in your pubspec.yaml:

flutter:
  assets:
    - assets/animations/

JSON Source

Load animations from a JSON string:

DotLottieView(
  sourceType: 'json',
  source: '{"v":"5.5.7","fr":60,"ip":0,...}',
  autoplay: true,
  loop: true,
)

Next Steps

Now that you have a basic animation running, explore more features:

Properties - Learn about all available configuration options
Methods - Discover how to control animations programmatically
Events - Handle animation lifecycle events
State Machines - Create interactive animations
Examples - See more practical examples