title: How to fix animation glitches in Flutter Lottie
body: <p>I have an app with lots of Lottie animations. They work fine in a Windows UWP app and <a href="https://play.google.com/store/apps/details?id=com.airbnb.lottie" rel="nofollow noreferrer">AirBnB sample Android app</a>. Also look fine in lottiefiles.com online test tool.</p>
  <p>But they are glitchy in Flutter using <a href="https://pub.dev/packages/lottie" rel="nofollow noreferrer">Lottie for Flutter</a> package. Not all of them, but many, maybe around a third.</p>
  <p>Full source code below, you can try for yourself.</p>
  <p>Glitches are either frame overlaps or blinking, as if there is a gap between frames.</p>
  <p>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.</p>
  <p>I have tried loading them as <code>composition</code> from memory with a <code>controller</code>. 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.</p>
  <p>Full example is below. Just paste this into main.dart and add dependency to yaml: <code>lottie: ^1.2.1</code>.</p>
  <pre><code>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(&quot;Lottie Test&quot;),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: &lt;Widget&gt;[
              Expanded(
                child: Lottie.network(
                    'https://assets6.lottiefiles.com/packages/lf20_uz92k22x.json'),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>