{"id":36214364,"url":"https://github.com/lottiefiles/dotlottie-flutter","last_synced_at":"2026-01-13T22:01:47.528Z","repository":{"id":331769962,"uuid":"1068515031","full_name":"LottieFiles/dotlottie-flutter","owner":"LottieFiles","description":"dotLottie for the Flutter framework.","archived":false,"fork":false,"pushed_at":"2025-11-21T11:26:34.000Z","size":505,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-11T10:36:18.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LottieFiles.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-02T13:56:01.000Z","updated_at":"2026-01-08T23:04:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/LottieFiles/dotlottie-flutter","commit_stats":null,"previous_names":["lottiefiles/dotlottie-flutter"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/LottieFiles/dotlottie-flutter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LottieFiles","download_url":"https://codeload.github.com/LottieFiles/dotlottie-flutter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-flutter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28400408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-11T04:40:28.519Z","updated_at":"2026-01-13T22:01:47.521Z","avatar_url":"https://github.com/LottieFiles.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dotLottie Flutter\n\nA Flutter plugin for rendering Lottie and dotLottie animations with full playback control, state machine support, and cross-platform compatibility.\n\n**Platforms supported:** iOS, Android, macOS, and Web\n\nBuilt on top of native implementations:\n- [iOS/macOS](https://github.com/LottieFiles/dotlottie-ios/)\n- [Android](https://github.com/LottieFiles/dotlottie-android/)\n- [Web](https://github.com/LottieFiles/dotlottie-web)\n\n## Features\n\n- ✨ Play Lottie and dotLottie animations\n- 🎮 Full playback control (play, pause, stop, seek)\n- 🔄 State machine support with interactive inputs\n- 🎨 Theme support\n- 📱 Cross-platform: iOS, Android, macOS, and Web\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Properties](#properties)\n- [Methods](#methods)\n- [Events](#events)\n- [State Machines](#state-machine-example)\n- [Developer Setup](#developer-setup-guide)\n\n## Installation\n\nWith Flutter:\n\n```bash\nflutter pub add dotlottie-flutter\n```\n\nThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get)\n\nImport it in your Dart code:\n\n```dart\nimport 'package:dotlottie_flutter/dotlottie_flutter.dart';\n```\n\n### Android\n\nTo allow dotlottie-android to download, ensure you have jitpack inside your build.gradle.kts file:\n\n```kotlin\nmaven { url = uri(\"https://jitpack.io\") }\n```\n\n## Quick Start\n\n```\nimport 'package:flutter/material.dart';\nimport 'package:dotlottie_flutter/dotlottie_flutter.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatefulWidget {\n  const MyApp({super.key});\n\n  @override\n  State\u003cMyApp\u003e createState() =\u003e _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n  DotLottieViewController? _controller;\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(title: const Text('dotLottie Example')),\n        body: Center(\n          child: Column(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: [\n              // DotLottie animation view\n              SizedBox(\n                width: 300,\n                height: 300,\n                child: DotLottieView(\n                  sourceType: 'url',\n                  source: 'https://lottie.host/your-animation.lottie',\n                  autoplay: true,\n                  loop: true,\n                  onViewCreated: (controller) {\n                    _controller = controller;\n                  },\n                  onLoad: () {\n                     // Do something\n                  }\n                ),\n              ),\n              \n              const SizedBox(height: 20),\n              \n              // Basic playback controls\n              Row(\n                mainAxisAlignment: MainAxisAlignment.center,\n                children: [\n                  ElevatedButton(\n                    onPressed: () =\u003e _controller?.play(),\n                    child: const Text('Play'),\n                  ),\n                  const SizedBox(width: 10),\n                  ElevatedButton(\n                    onPressed: () =\u003e _controller?.pause(),\n                    child: const Text('Pause'),\n                  ),\n                  const SizedBox(width: 10),\n                  ElevatedButton(\n                    onPressed: () =\u003e _controller?.stop(),\n                    child: const Text('Stop'),\n                  ),\n                ],\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n## Properties\n\n### Required Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `source` | `String` | The source of the animation (URL, asset path, or JSON string) |\n| `sourceType` | `String` | Type of source: `'url'`, `'asset'`, or `'json'` |\n\n### Playback Properties\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `autoplay` | `bool` | `false` | Whether the animation should start playing automatically |\n| `loop` | `bool` | `false` | Whether the animation should loop |\n| `loopCount` | `int?` | `null` | Number of times to loop (overrides `loop` if set) |\n| `speed` | `double` | `1.0` | Playback speed multiplier (e.g., `2.0` for double speed) |\n| `mode` | `String?` | `null` | Playback mode: `'forward'`, `'reverse'`, `'bounce'`, or `'reverse-bounce'` |\n| `useFrameInterpolation` | `bool` | `false` | Enable frame interpolation for smoother playback |\n\n### Animation Control\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `segment` | `List\u003cdouble\u003e?` | Play a specific segment `[startFrame, endFrame]` |\n| `marker` | `String?` | Play from a named marker defined in the animation |\n| `animationId` | `String?` | ID of a specific animation to play (for multi-animation files) |\n\n### Visual Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `backgroundColor` | `String?` | Background color in hex format (e.g., `'#FF0000'`) |\n| `width` | `double?` | Canvas width for rendering |\n| `height` | `double?` | Canvas height for rendering |\n\n### Advanced Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `themeId` | `String?` | ID of a theme to apply to the animation |\n| `stateMachineId` | `String?` | ID of a state machine to load and start automatically |\n\n## Example Usage\n```dart\nDotLottieView(\n  source: 'https://lottie.host/your-animation.lottie',\n  sourceType: 'url',\n  autoplay: true,\n  loop: true,\n  speed: 1.5,\n  mode: 'bounce',\n  backgroundColor: '#FFFFFF',\n  useFrameInterpolation: true,\n  onViewCreated: (controller) {\n    // Access controller for programmatic control\n  },\n)\n```\n\n## State Machine Example\n```dart\nDotLottieView(\n  source: 'https://lottie.host/your-animation.lottie',\n  sourceType: 'url',\n  stateMachineId: 'myStateMachine',\n  onViewCreated: (controller) {\n    _controller = controller;\n  },\n  stateMachineOnStateEntered: (state) {\n    print('Entered state: $state');\n  },\n)\n\n// Interact with the state machine\nElevatedButton(\n  onPressed: () {\n    _controller?.stateMachineSetBooleanInput('isActive', true);\n    _controller?.stateMachineFire('myEvent');\n  },\n  child: Text('Trigger Event'),\n)\n```\n\n### Methods\n\nAccess these methods via the controller:\n```dart\nDotLottieViewController? _controller;\nawait _controller?.play();\n```\n\n#### Playback Control\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `play()` | `Future\u003cbool?\u003e` | Starts playing the animation. |\n| `pause()` | `Future\u003cbool?\u003e` | Pauses the animation. |\n| `stop()` | `Future\u003cbool?\u003e` | Stops the animation and resets to the beginning. |\n\n#### Animation State Getters\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `isPlaying()` | `Future\u003cbool?\u003e` | Returns whether the animation is currently playing. |\n| `isPaused()` | `Future\u003cbool?\u003e` | Returns whether the animation is paused. |\n| `isStopped()` | `Future\u003cbool?\u003e` | Returns whether the animation is stopped. |\n| `isLoaded()` | `Future\u003cbool?\u003e` | Returns whether the animation has loaded. |\n| `currentFrame()` | `Future\u003cdouble?\u003e` | Gets the current frame number. |\n| `totalFrames()` | `Future\u003cdouble?\u003e` | Gets the total number of frames. |\n| `currentProgress()` | `Future\u003cdouble?\u003e` | Gets the current progress (0.0 to 1.0). |\n| `duration()` | `Future\u003cdouble?\u003e` | Gets the animation duration in milliseconds. |\n| `loopCount()` | `Future\u003cint?\u003e` | Gets the current loop count. |\n| `speed()` | `Future\u003cdouble?\u003e` | Gets the current playback speed. |\n| `loop()` | `Future\u003cbool?\u003e` | Gets the loop setting. |\n| `autoplay()` | `Future\u003cbool?\u003e` | Gets the autoplay setting. |\n| `useFrameInterpolation()` | `Future\u003cbool?\u003e` | Gets the frame interpolation setting. |\n| `segments()` | `Future\u003cList\u003cdouble\u003e?\u003e` | Gets the active segment `[start, end]`. |\n| `mode()` | `Future\u003cString?\u003e` | Gets the current playback mode. |\n\n#### Animation Control Setters\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `setSpeed(double speed)` | `Future\u003cvoid\u003e` | Sets the playback speed. |\n| `setLoop(bool loop)` | `Future\u003cvoid\u003e` | Sets whether the animation should loop. |\n| `setFrame(double frame)` | `Future\u003cbool?\u003e` | Sets the current frame. |\n| `setProgress(double progress)` | `Future\u003cbool?\u003e` | Sets the progress (0.0 to 1.0). |\n| `setSegments(double start, double end)` | `Future\u003cvoid\u003e` | Sets a segment of the animation to play. |\n| `setMarker(String marker)` | `Future\u003cvoid\u003e` | Sets a marker for playback. |\n| `setMode(String mode)` | `Future\u003cvoid\u003e` | Sets the playback mode. |\n| `setFrameInterpolation(bool useFrameInterpolation)` | `Future\u003cvoid\u003e` | Enables or disables frame interpolation. |\n\n#### Theme Methods\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `setTheme(String themeId)` | `Future\u003cbool?\u003e` | Applies a theme by ID. |\n| `setThemeData(String themeData)` | `Future\u003cbool?\u003e` | Applies a theme using JSON data. |\n| `resetTheme()` | `Future\u003cbool?\u003e` | Resets to the default theme. |\n| `activeThemeId()` | `Future\u003cString?\u003e` | Gets the currently active theme ID. |\n\n#### Animation Loading\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `loadAnimation(String animationId)` | `Future\u003cvoid\u003e` | Loads a specific animation by ID. |\n| `activeAnimationId()` | `Future\u003cString?\u003e` | Gets the currently active animation ID. |\n| `markers()` | `Future\u003cList\u003cMap\u003cString, dynamic\u003e\u003e?\u003e` | Gets all available markers. |\n\n#### Advanced Features\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `setSlots(String slots)` | `Future\u003cbool?\u003e` | Sets slot data for dynamic content. |\n| `resize(int width, int height)` | `Future\u003cvoid\u003e` | Resizes the animation viewport. |\n| `getLayerBounds(String layerName)` | `Future\u003cList\u003cdouble\u003e?\u003e` | Gets the bounds of a specific layer. |\n| `manifest()` | `Future\u003cMap\u003cString, dynamic\u003e?\u003e` | Gets the animation manifest data. |\n\n#### State Machine Methods\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `stateMachineLoad(String stateMachineId)` | `Future\u003cbool?\u003e` | Loads a state machine by ID. |\n| `stateMachineLoadData(String data)` | `Future\u003cbool?\u003e` | Loads a state machine from JSON data. |\n| `stateMachineStart()` | `Future\u003cbool?\u003e` | Starts the loaded state machine. |\n| `stateMachineStop()` | `Future\u003cbool?\u003e` | Stops the state machine. |\n| `stateMachineFire(String event)` | `Future\u003cvoid\u003e` | Fires a named event in the state machine. |\n| `stateMachineSetNumericInput(String key, double value)` | `Future\u003cbool?\u003e` | Sets a numeric input value. |\n| `stateMachineSetStringInput(String key, String value)` | `Future\u003cbool?\u003e` | Sets a string input value. |\n| `stateMachineSetBooleanInput(String key, bool value)` | `Future\u003cbool?\u003e` | Sets a boolean input value. |\n| `stateMachineGetNumericInput(String key)` | `Future\u003cdouble?\u003e` | Gets a numeric input value. |\n| `stateMachineGetStringInput(String key)` | `Future\u003cString?\u003e` | Gets a string input value. |\n| `stateMachineGetBooleanInput(String key)` | `Future\u003cbool?\u003e` | Gets a boolean input value. |\n| `stateMachineGetInputs()` | `Future\u003cMap\u003cString, String\u003e?\u003e` | Gets all input names and their types. |\n| `stateMachineCurrentState()` | `Future\u003cString?\u003e` | Gets the current state name. |\n| `getStateMachine(String id)` | `Future\u003cString?\u003e` | Gets state machine data by ID. |\n\n#### Cleanup\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `dispose()` | `Future\u003cvoid\u003e` | Disposes of the controller and releases resources. |\n\n### Events\n\nAdd listeners to events on the widget:\n```dart\nDotLottieView(\n   onFrame: (frameNo) {\n      // Do something\n   }\n)\n```\n\n| Event                                  | Description                                                   |\n| -------------------------------------- | ------------------------------------------------------------- |\n| `onLoad` → `void Function()?`                  | Called when the animation is loaded.                          |\n| `onComplete` → `void Function()?`              | Called when the animation completes.                          |\n| `onLoadError` → `void Function()?`             | Called when there's an error loading the animation.           |\n| `onPlay` → `void Function()?`                  | Called when the animation starts playing.                     |\n| `onPause` → `void Function()?`                 | Called when the animation is paused.                          |\n| `onStop` → `void Function()?`                  | Called when the animation is stopped.                         |\n| `onLoop` → `void Function(double loopCount)?` | Called when the animation loops, with the current loop count. |\n| `onFrame` → `void Function(double frameNo)?`  | Called on each frame update.                                  |\n| `onRender` → `void Function(double frameNo)?` | Called when a frame is rendered.                              |\n| `onFreeze` → `void Function()?`                | Called when the animation is frozen.                          |\n| `onUnFreeze` → `void Function()?`              | Called when the animation is unfrozen.                        |\n| `onDestroy` → `void Function()?`               | Called when the animation is destroyed.                       |\n\n### State Machine Events\n\n| Event                                                                                                  | Description                                      |\n| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |\n| `stateMachineOnStart` → `void Function()?`                                                                     | Called when the state machine starts.            |\n| `stateMachineOnStop` → `void Function()?`                                                                      | Called when the state machine stops.             |\n| `stateMachineOnStateEntered` → `void Function(String enteringState)?`                                         | Called when entering a new state.                |\n| `stateMachineOnStateExit` → `void Function(String leavingState)?`                                             | Called when exiting a state.                     |\n| `stateMachineOnTransition` → `void Function(String previousState, String newState)?`                         | Called during a state transition.                |\n| `stateMachineOnBooleanInputValueChange` → `void Function(String inputName, bool oldValue, bool newValue)?` | Called when a boolean input changes.             |\n| `stateMachineOnNumericInputValueChange` → `void Function(String inputName, double oldValue, double newValue)?`   | Called when a numeric input changes.             |\n| `stateMachineOnStringInputValueChange` → `void Function(String inputName, String oldValue, String newValue)?`    | Called when a string input changes.              |\n| `stateMachineOnInputFired` → `void Function(String inputName)?`                                               | Called when an input event is fired.             |\n| `stateMachineOnCustomEvent` → `void Function(String message)?`                                                | Called when a custom state machine event occurs. |\n| `stateMachineOnError` → `void Function(String message)?`                                                      | Called when a state machine error occurs.        |\n\n## Contributing\n\nSee the [development guide](DEVELOPMENT.md) to learn how to get up and running with this project. Once you're ready, please submit a pull request and we will review it! Thanks!\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fdotlottie-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flottiefiles%2Fdotlottie-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fdotlottie-flutter/lists"}