Web Support - without required canvaskit for mobile platforms.

[VladRoscaDev]

First let me say thank you for your amazing package.

At the moment everything works well if we use flutter build web --release --web-renderer canavaskit. But as the official docs say canvaskit for the web(desktop) better performance and html should be used on a mobile platform because of its limitations.

The error when I try to use html renderer is: Flutter Web does not support the blend mode: BlendMode.clear

https://github.com/xvrh/lottie-flutter/blob/master/lib/src/model/layer/base_layer.dart#L66 Maibe we can replace this BlendMode.clear with a custom implementation.

What I tested and still no success:

 Paint _clearPaintSrc = ui.Paint()
    ..isAntiAlias = false
    ..blendMode = BlendMode.src;
  Paint _clearPaintDst = ui.Paint()
   ..isAntiAlias = false
   ..blendMode = BlendMode.dst;

• BlendMode.clear -> Drop both the source and destination image, leaving nothing.
• BlendMode.src -> Drop the destination image, only paint the source image.
• BlendMode.dst -> Drop the source image, only paint the destination image.

At the moment i get Flutter web doesn;t support BlendMode.dst

We manage to solve the issue by using canvaskit but that causes all the app to feel very glitchy on mobile. So please if this can be fixed It would be awesome.

I also created and issue for the flutter team: https://github.com/flutter/flutter/issues/101043

[razfazz]

have the same issue

[VladRoscaDev]

The issue seems to be fix in flutter version 3.0, run flutter upgrade, then use camvas kit and you will get a smoothe experience if u also precache the animations.