Lottie not working in web since 3.1.2 about lottie-flutter

[xvrh]

I think you should drop the renderCache: RenderCache.raster. It's not supported in the web with the html-renderer.

Alternatively, you can also try the canvaskit renderer.

[xvrh]

@konsultaner can you show how you configure the lottie widget? Do you use the renderCache property?

[konsultaner]

@xvrh sorry, totally rushed that issue. This is my file including the lottie asset.

import 'dart:math';

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

class QRCodeLoginNoScan extends StatelessWidget {
  const QRCodeLoginNoScan({super.key});

  @override
  Widget build(BuildContext context) {
    var lottieDelegates = [
      if (Theme.of(context).brightness == Brightness.dark)
        ValueDelegate.colorFilter(
          const [ '**'],
          value: ColorFilter.mode(Theme.of(context).colorScheme.onSurface, BlendMode.src),
        ),
      if (Theme.of(context).brightness == Brightness.light)
        ValueDelegate.colorFilter(
          const [ '**', 'scan', '**'],
          value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
        ),
      if (Theme.of(context).brightness == Brightness.light)
        ValueDelegate.colorFilter(
          const [ '**', 'phone', 'Group 1', '**'],
          value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
        )
    ];
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 20),
      child: Center(
        child: FittedBox(
          fit: BoxFit.contain,
          child: Lottie.asset(
            width: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
            height: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
            fit: BoxFit.contain,
            'assets/lottie/qr_code_animation.json',
            renderCache: RenderCache.raster,
            delegates: LottieDelegates(values: lottieDelegates),
          ),
        ),
      ),
    );
  }
}

[konsultaner]

I think you should drop the renderCache: RenderCache.raster. It's not supported in the web with the html-renderer.

Maybe the package should add a debug warning and have a kIsWeb check on the renderCache so nobody else will have to face this issue?

[xvrh]

I think it works with the canvaskit renderer so kIsWeb is not enough. We need to detect the web-renderer used and I don't know if it's possible.
And this library works poorly with the html-renderer anyway, they are a lot of limitations.

Furthermore it's likely that the html-renderer will go away: flutter/flutter#145954

[konsultaner]

I changed my code to:

import 'dart:math';

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

class QRCodeLoginNoScan extends StatelessWidget {
  const QRCodeLoginNoScan({super.key});

  @override
  Widget build(BuildContext context) {
    var lottieDelegates = [
      if (Theme.of(context).brightness == Brightness.dark)
        ValueDelegate.colorFilter(
          const [ '**'],
          value: ColorFilter.mode(Theme.of(context).colorScheme.onSurface, BlendMode.src),
        ),
      if (Theme.of(context).brightness == Brightness.light)
        ValueDelegate.colorFilter(
          const [ '**', 'scan', '**'],
          value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
        ),
      if (Theme.of(context).brightness == Brightness.light)
        ValueDelegate.colorFilter(
          const [ '**', 'phone', 'Group 1', '**'],
          value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
        )
    ];
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 20),
      child: Center(
        child: Lottie.asset(
          width: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
          height: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
          //fit: BoxFit.contain,
          'assets/lottie/qr_code_animation.json',
          renderCache: kIsWeb ? null : RenderCache.raster,
          delegates: LottieDelegates(values: lottieDelegates),
        ),
      ),
    );
  }
}

on first load eveything works great but on hot-reload I get this error:

The following PersistedSurfaceException was thrown during a scheduler callback:
PersistedScene: is in an unexpected state.
Expected one of: PersistedSurfaceState.active, PersistedSurfaceState.pendingUpdate
But was: PersistedSurfaceState.released

When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3       throw_
lib/_engine/engine/html/surface.dart 181:3                                        debugAssertSurfaceState
lib/_engine/engine/html/surface.dart 705:12                                       update
lib/_engine/engine/html/scene_builder.dart 506:9                                  <fn>
lib/_engine/engine/profiler.dart 41:18                                            timeAction
lib/_engine/engine/html/scene_builder.dart 502:12                                 build
packages/flutter/src/rendering/layer.dart 1138:35                                 buildScene
packages/flutter/src/rendering/view.dart 304:30                                   compositeFrame
packages/flutter/src/rendering/binding.dart 582:19                                drawFrame
packages/flutter/src/widgets/binding.dart 1138:13                                 drawFrame
packages/flutter/src/rendering/binding.dart 443:5                                 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1392:7                                [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1313:9                                handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1171:5                                [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1404:5                                invoke
lib/_engine/engine/platform_dispatcher.dart 307:5                                 invokeOnDrawFrame
lib/_engine/engine/initialization.dart 187:36                                     <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 426:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:39  dcall

Is that lottie related? Never seen anything like this.