tinyjin/lottie-thorvg

Fast and compact Lottie for Flutter using ThorVG as a renderer. (beta)

Lottie ThorVG for Flutter

This Lottie for Flutter uses ThorVG as a renderer, provides a high performance and compact size.

• 🖼️ Supports Lottie animation (JSON)
• 👑 Based on C++ Native Function
• 🍃 Lower CPU & Memory usage
• ⚡ Higher frame rates

Usage

lottie-thorvg aims to maintain the same interface as lottie-flutter. If you are currently using them, you can utilize the code by simply replacing the import statement with import 'package:lottie_thorvg/lottie_thorvg.dart'.

import 'package:lottie_thorvg/lottie_thorvg.dart';
// ...
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // Load a Lottie animation from the assets
            Lottie.asset('assets/lottie/dancing_star.json'),

            // Load a Lottie animation from a url
            Lottie.network(
              'https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json'
            ),
          ],
        ),
      ),
    );
  }
}

Known Issues

Warning

As an experimental project, we anticipate the following issues may render the use of this library unstable. Please verify before using lottie-thorvg.

iOS

Unexpected white background rendered (#2)

This seems to be appeared by the Impeller renderer, affecting rendered canvas that has unexpected white background.

Workaround:

• Open Info.plist
• Turn off Impeller by adding:

  <key>FLTEnableImpeller</key>
  <false/>

Apple Silicon simulator build error (#4)

Currently, ThorVG Flutter iOS binding operates with a dylib. To support universal dynamic library, We should transition to using xcframework. However dart-ffi faces an issue where it can't open dynamic libraries through the xcframework.

It only triggers an error when buliding on iOS Simulator under Apple Silicon.

Workaround:

• If you're using mac OS(Intel), no effects
• Do use iOS Simulator by rosetta It won't effect to real device & store uploading

License

MIT

lottie-thorvg's Issues

iOS Simulator linking issue (Apple Silicon)

Installation bug from building with iOS Simulator hosted by M1 (SoC)
Probably, dylib for ios-sim on arm64 is missing.

Launching lib/main.dart on iPhone 15 Pro in debug mode...
Running pod install...                                           1,252ms
Running Xcode build...
 └─Compiling, linking and signing...                        10.4s
Xcode build done.                                           35.3s
Failed to build iOS app
Error (Xcode): Building for 'iOS-simulator', but linking in dylib
(../ios/Frameworks/libthorvg.dylib) built for 'iOS'


Error (Xcode): Linker command failed with exit code 1 (use -v to see invocation)


Could not build the application for the simulator.
Error launching application on iPhone 15 Pro.

iOS white background issue by Impeller

ui.decodeImageFromPixels returns image on white background, it's currently forced by Impeller renderer which is new and default engine from iOS/Flutter v3.10.

(It could effect to android/impeller build. currently no effect because skia is still default for android)

To resolve this issue, the only way for now is turning off Impeller by editing Info.plist.

<key>FLTEnableImpeller</key>
<true/>

Wonder anybody knows about this issue and handles it with flutter team.
Probably, should be fixed by Impeller side in next flutter release.

[iOS build with Impeller(default)]

[iOS build with Skia]

Requires an automated testing pipeline

To enhance library's stability, automated testing such as unit test, building and analyze is strongly required.

Here are current supported platforms:

• Android (arm64)
• Android (x86_64)
• iOS (arm64)
• iOS Simulator (x86_64)

These are test cases we basically need:

• Lottie.asset (testWidget)
• Lottie.network (testWidget)
• Lottie.memory (testWidget)
• Lottie.file (testWidget)
• Module memory deallocation
• Application build with all platforms and architectures
• Frame rates testing 60FPS / 120FPS (Must ensure the maximum frame rates of animation)

Once it's ready, we can integrate these changes and ensure they are applied consistently with each major update through the GitHub action.

Consider renaming main library file for consistency

Hey there! 👋

The Dart document (https://dart.dev/guides/libraries/create-library-packages) recommends that the main library file for a package should be named lib/<package-name>.dart. However, the current entry point file for the lottie-thorvg package is named lottiel.dart, which deviates from the recommended naming convention.

For consistency with the guidelines and better discoverability, it might be worth considering renaming the lottiel.dart file to lottie-thorvg.dart.

Thank you!

Support BoxFit

When the canvas size is bigger than animation has, image is resized like Boxfit.fill.
This issue causes different size from lottie-flutter.

Step 1. Must ensure the default rendering result is Boxfit.none.

Step 2. Should support 7 options on BoxFit enum:
https://api.flutter.dev/flutter/painting/BoxFit.html

• fill
• contain
• cover
• fitWidth
• fitHeight
• none
• scaleDown

The parameter usage will be:

Lottie.asset(
    'assets/path/to/lottie.json',
    width: 300,
    height: 300,
    fit: BoxFit.cover
)