CODEWITHSUNDEEP
flutterdartlottie
under
under

Reputation: 3067

How to fix animation glitches in Flutter Lottie

I have an app with lots of Lottie animations. They work fine in a Windows UWP app and AirBnB sample Android app. Also look fine in lottiefiles.com online test tool.

But they are glitchy in Flutter using Lottie for Flutter package. Not all of them, but many, maybe around a third.

Full source code below, you can try for yourself.

Glitches are either frame overlaps or blinking, as if there is a gap between frames.

Glitches are consistent, i.e. always happen in the same place, so does not seem like a performance issue. Also, they are not happening between repeats, but in the middle of the animation, so again not an application issue but seems to be the issue with how they are rendered.

I have tried loading them as composition from memory with a controller. I have also tried a vanilla asset load to rule out issues with my implementation, and they are behaving the same. The issue appears both in the emulator and the actual phone. So it seems to me it is not caused by the way I implemented but by the Lottie package itself, or perhaps an issue with Lottie JSON that for some reason only affects Android.

Full example is below. Just paste this into main.dart and add dependency to yaml: lottie: ^1.2.1.

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lottie Test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Lottie.network(
                  'https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json'),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 7

Views: 12320

Answers (3)

Apolo Victor Lordelo de Olivei
Apolo Victor Lordelo de Olivei

Reputation: 11

According to the official package documentation For Flutter Web, run the app with: flutter run --web-renderer canvaskit

Works fine for me in the latest version: lottie: ^1.2.1

Upvotes: 1

Kaushik Chandru
Kaushik Chandru

Reputation: 17772

Try adding frameRate: FrameRate.max like stated below.

       Expanded(
          child: Lottie.network('https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json', 
              frameRate: FrameRate.max,
              ),
        ),

this will render the Lottie animation with the same frame rate of that of the app. In Lottie plugin it will render the json as per the frame rate mentioned in the json file. An animation encoded with a 25 FPS will only be painted 25 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds. Hence this framerate was introduced from Lottie 0.6.0

Upvotes: 6

William Black
William Black

Reputation: 56

I use Lottie for Flutter on my applications and it works well also on emulator or on low-performance phones. The problem can be related to bad converted animations, or you can try to use Lottie.asset(yourjson) to avoid potential network fetch issues.

Upvotes: 0

Related Questions