# Flutter Player
How to install and use the dotLottie Flutter player. Covers installation via pub.dev, basic widget usage, and playback control.

# 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.44`
- Dart SDK `>=3.12`
- Platforms: iOS, Android, macOS, Web, Windows, and Linux

## Installation

Add `dotlottie_flutter` to your `pubspec.yaml`:

```yaml
dependencies:
  dotlottie_flutter: ^0.1.7
```

Then run:

```bash
flutter pub get
```

## Platform Setup

### Android

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

```groovy
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:

```bash
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`:

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

:::

## Basic Usage

### Load from a URL

```dart
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

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

### Load from JSON String

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

## Controlling Playback

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

```dart
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

```dart
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](/en/runtimes/distributions/flutter/v0.x/api-reference) — Full widget and controller API
- [Examples](/en/runtimes/distributions/flutter/v0.x/examples) — Advanced usage examples