{"id":13552266,"url":"https://github.com/xvrh/lottie-flutter","last_synced_at":"2025-05-14T00:07:12.986Z","repository":{"id":37430075,"uuid":"235792611","full_name":"xvrh/lottie-flutter","owner":"xvrh","description":"Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.","archived":false,"fork":false,"pushed_at":"2025-03-24T07:43:02.000Z","size":79733,"stargazers_count":1230,"open_issues_count":139,"forks_count":212,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-09T00:13:01.452Z","etag":null,"topics":["dart","flutter","flutter-web","flutter-widget","lottie","lottie-android","lottie-animation","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/lottie","language":"Dart","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/xvrh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":"xvrh","custom":"https://buymeacoffee.com/xvrh"}},"created_at":"2020-01-23T12:41:27.000Z","updated_at":"2025-05-06T12:29:16.000Z","dependencies_parsed_at":"2023-12-18T08:24:59.626Z","dependency_job_id":"fa89d1b2-133b-4941-9d9c-124e77a9d779","html_url":"https://github.com/xvrh/lottie-flutter","commit_stats":{"total_commits":141,"total_committers":16,"mean_commits":8.8125,"dds":"0.16312056737588654","last_synced_commit":"a2e40ecd081c44b5873b72b73a16a5dfdcb12ba5"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xvrh%2Flottie-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xvrh%2Flottie-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xvrh%2Flottie-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xvrh%2Flottie-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xvrh","download_url":"https://codeload.github.com/xvrh/lottie-flutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043692,"owners_count":22004997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["dart","flutter","flutter-web","flutter-widget","lottie","lottie-android","lottie-animation","widget"],"created_at":"2024-08-01T12:02:01.419Z","updated_at":"2025-05-14T00:07:12.964Z","avatar_url":"https://github.com/xvrh.png","language":"Dart","funding_links":["https://github.com/sponsors/xvrh","https://buymeacoffee.com/xvrh","https://www.buymeacoffee.com/xvrh"],"categories":["组件","Dart","Components","9. 视觉效果与动效（让 App 更精致）"],"sub_categories":["图片","Image"],"readme":"# Lottie for Flutter\n\n[![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)\n[![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)\n\nLottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) \nanimations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!\n\nThis repository is an unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart. \n\nIt works on Android, iOS, macOS, linux, windows and web.\n\n\u003ca href=\"https://www.buymeacoffee.com/xvrh\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"60\" width=\"217\"\u003e\u003c/a\u003e\n\n## Usage\n\n### Simple animation\nThis example shows how to display a Lottie animation in the simplest way.  \nThe `Lottie` widget will load the json file and run the animation indefinitely.\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:lottie/lottie.dart';\n\nvoid main() =\u003e runApp(const MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: ListView(\n          children: [\n            // Load a Lottie file from your assets\n            Lottie.asset('assets/LottieLogo1.json'),\n\n            // Load a Lottie file from a remote url\n            Lottie.network(\n                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),\n\n            // Load an animation and its images from a zip file\n            Lottie.asset('assets/lottiefiles/angel.zip'),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Specify a custom `AnimationController`\nThis example shows how to take full control over the animation by providing your own `AnimationController`.\n\nWith a custom `AnimationController` you have a rich API to play the animation in various ways: start and stop the animation when you want,\n play forward or backward, loop between specifics points...  \n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:lottie/lottie.dart';\n\nvoid main() =\u003e runApp(const MyApp());\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 with TickerProviderStateMixin {\n  late final AnimationController _controller;\n\n  @override\n  void initState() {\n    super.initState();\n\n    _controller = AnimationController(vsync: this);\n  }\n\n  @override\n  void dispose() {\n    _controller.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: ListView(\n          children: [\n            Lottie.asset(\n              'assets/LottieLogo1.json',\n              controller: _controller,\n              onLoaded: (composition) {\n                // Configure the AnimationController with the duration of the\n                // Lottie file and start the animation.\n                _controller\n                  ..duration = composition.duration\n                  ..forward();\n              },\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\n[See this file](https://github.com/xvrh/lottie-flutter/blob/master/example/lib/examples/animation_full_control.dart) for a more comprehensive example.\n\n### Control the size of the Widget\nThe `Lottie` widget takes the same arguments and have the same behavior as the `Image` widget\nin term of controlling its size.\n```dart\nLottie.asset(\n  'assets/LottieLogo1.json',\n  width: 200,\n  height: 200,\n  fit: BoxFit.fill,\n)\n```\n\n`width` and `height` are optionals and fallback on the size imposed by the parent or on the intrinsic size of the lottie \nanimation.\n\n### Custom loading\nThe `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and\ncache automatically the json file.\n\nSometime you may prefer to have full control over the loading of the file. Use `AssetLottie` (or `NetworkLottie`, `MemoryLottie`) to load a lottie composition from a json file.\n\nThis example shows how to load and parse a Lottie composition from a json file.  \n\n```dart\nclass MyWidget extends StatefulWidget {\n  const MyWidget({super.key});\n\n  @override\n  State\u003cMyWidget\u003e createState() =\u003e _MyWidgetState();\n}\n\nclass _MyWidgetState extends State\u003cMyWidget\u003e {\n  late final Future\u003cLottieComposition\u003e _composition;\n\n  @override\n  void initState() {\n    super.initState();\n\n    _composition = AssetLottie('assets/LottieLogo1.json').load();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return FutureBuilder\u003cLottieComposition\u003e(\n      future: _composition,\n      builder: (context, snapshot) {\n        var composition = snapshot.data;\n        if (composition != null) {\n          return Lottie(composition: composition);\n        } else {\n          return const Center(child: CircularProgressIndicator());\n        }\n      },\n    );\n  }\n}\n```\n\n### Custom drawing\nThis example goes low level and shows you how to draw a `LottieComposition` on a custom Canvas at a specific frame in \na specific position and size.\n\n````dart\nclass CustomDrawer extends StatelessWidget {\n  final LottieComposition composition;\n\n  const CustomDrawer(this.composition, {super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return CustomPaint(\n      painter: _Painter(composition),\n      size: const Size(400, 400),\n    );\n  }\n}\n\nclass _Painter extends CustomPainter {\n  final LottieDrawable drawable;\n\n  _Painter(LottieComposition composition)\n      : drawable = LottieDrawable(composition);\n\n  @override\n  void paint(Canvas canvas, Size size) {\n    var frameCount = 40;\n    var columns = 10;\n    for (var i = 0; i \u003c frameCount; i++) {\n      var destRect = Offset(i % columns * 50.0, i ~/ 10 * 80.0) \u0026 (size / 5);\n      drawable\n        ..setProgress(i / frameCount)\n        ..draw(canvas, destRect);\n    }\n  }\n\n  @override\n  bool shouldRepaint(CustomPainter oldDelegate) {\n    return true;\n  }\n}\n````\n\n### Modify properties at runtime\nThis example shows how to modify some properties of the animation at runtime. Here we change the text,\nthe color, the opacity and the position of some layers.\nFor each `ValueDelegate` we can either provide a static `value` or a `callback` to compute a value for a each frame.\n\n````dart\nclass _Animation extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Lottie.asset(\n      'assets/Tests/Shapes.json',\n      delegates: LottieDelegates(\n        text: (initialText) =\u003e '**$initialText**',\n        values: [\n          ValueDelegate.color(\n            const ['Shape Layer 1', 'Rectangle', 'Fill 1'],\n            value: Colors.red,\n          ),\n          ValueDelegate.opacity(\n            const ['Shape Layer 1', 'Rectangle'],\n            callback: (frameInfo) =\u003e (frameInfo.overallProgress * 100).round(),\n          ),\n          ValueDelegate.position(\n            const ['Shape Layer 1', 'Rectangle', '**'],\n            relative: const Offset(100, 200),\n          ),\n        ],\n      ),\n    );\n  }\n}\n````\n\n### Frame rate\nBy default, the animation is played at the frame rate exported by AfterEffect.\nThis is the most power-friendly as generally the animation is exported at 10 or 30 FPS compared to the phone's 60 or 120 FPS.\nIf the result is not good, you can change the frame rate\n\n````dart\nLottie.asset('anim.json',\n  // Use the device frame rate (up to 120FPS)\n  frameRate: FrameRate.max,\n  // Use the exported frame rate (default)\n  frameRate: FrameRate.composition,\n  // Specific frame rate\n  frameRate: FrameRate(10),\n)\n````\n\n### Telegram Stickers (.tgs) and DotLottie (.lottie)\nTGS file can be loaded by providing a special decoder\n\n````dart\nWidget build(BuildContext context) {\n  return ListView(\n    children: [\n      Lottie.network(\n        'https://telegram.org/file/464001484/1/bzi7gr7XRGU.10147/815df2ef527132dd23',\n        decoder: LottieComposition.decodeGZip,\n      ),\n      Lottie.asset(\n        'assets/LightningBug_file.tgs',\n        decoder: LottieComposition.decodeGZip,\n      ),\n    ],\n  );\n}\n````\n\nYou can select the correct .json file from a dotlottie (.lottie) archive by providing a custom decoder\n\n````dart\nclass Example extends StatelessWidget {\n  const Example({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Lottie.asset(\n      'assets/cat.lottie',\n      decoder: customDecoder,\n    );\n  }\n}\n\nFuture\u003cLottieComposition?\u003e customDecoder(List\u003cint\u003e bytes) {\n  return LottieComposition.decodeZip(bytes, filePicker: (files) {\n    return files.firstWhereOrNull(\n        (f) =\u003e f.name.startsWith('animations/') \u0026\u0026 f.name.endsWith('.json'));\n  });\n}\n````\n\n## Performance or excessive CPU/GPU usage\n\nVersion `v3.0` introduced the `renderCache` parameter to help reduce an excessive energy consumption.\n\nIn this mode, the frames of the animation are rendered lazily in an offscreen cache. Subsequent runs of the animation \nare cheaper to render. It helps reduce the power usage of the application at the cost of an increased memory usage.\n\n## Limitations\nThis port supports the same [feature set as Lottie Android](https://airbnb.io/lottie/#/supported-features).\n\n## Flutter Web\nRun the app with `flutter run -d chrome --web-renderer canvaskit`\n\nSee a preview here: https://xvrh.github.io/lottie-flutter-web/\n\n## More examples\nSee the `example` folder for more code samples of the various possibilities.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxvrh%2Flottie-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxvrh%2Flottie-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxvrh%2Flottie-flutter/lists"}