Lottie animation did not work correctly on our Flutter app

[silastruonggoldenowl]

We have an Lottie animation that run well on web editor or React-native platform. But there’s an issue when we run it on Flutter platform, the animation is not running the way it was designed. On web editor or React-native

https://user-images.githubusercontent.com/76761567/202085656-824bf569-fac3-4c6e-afac-2b2210d0d6dd.mp4

On Flutter:

https://user-images.githubusercontent.com/76761567/202085985-c902aa1a-b2b2-4450-8501-1514a79a1ab1.mov

As you can see, in Flutter, each text rotates separately while we want it all to rotate at the same time. Kindly help us to explain the reason why this has happened and what can we do to fix it. Thank you!

This is json file: https://lottie.host/2944fba7-c69c-40c5-ae80-7b995d9570fa/YRYkZXTzeM.json

Here is my flutter code:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text('Test Lottie'),
      ),
      body: Center(
       child: Lottie.network('https://lottie.host/2944fba7-c69c-40c5-ae80-7b995d9570fa/YRYkZXTzeM.json')
      ),

    );
  }
}

Here is my pubspec file:

name: test_lottie
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  lottie: ^1.4.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  uses-material-design: true

Let me know if you have any suggestion. Thanks!

[xvrh]

Thank you for the clear report. I can reproduce the problem.

It is also reproducible in the original Lottie Android library.

[tanphuccgl]

Hi Xavier, Thank you for looking into this! Can I ask any progress so far? It's been 15 days since you last updated. Thanks.@xvrh

[xvrh]

@tanphuccgl to be fully honest, I don't intent to work on this in the short term. The bug is somewhere in this file: https://github.com/xvrh/lottie-flutter/blob/master/lib/src/model/layer/text_layer.dart when useTextGlyph is true.

I would be happy to accept a path for this 👍

[tanphuccgl]

@xvrh thanks i will look into this

[kubrasahin]

Hello, lottie emultor is working properly. When you get the apk, the lottie animation does not open. Can you help me