UnimplementedError: Flutter Web does not support the blend mode: BlendMode.clear

[aliasgarlabs]

Steps to reproduce

1. Use a lottie animation widget
2. Build for web
3. Use chrome tools to change view port to Pixel 2
4. Reload the page

Expected

The app doesn't crash and animation loads correctly

Actual

App crashes and animation doesn't load

Stacktrace

 UnimplementedError: Flutter Web does not support the blend mode: BlendMode.clear
  at stringForBlendMode(org-dartlang-sdk:///lib/_internal/js_runtime/lib/js_helper.dart:1111:37)
  at BitmapCanvas._drawElement(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/bitmap_canvas.dart:1143:7)
  at BitmapCanvas.drawRect(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/bitmap_canvas.dart:446:36)
  at PaintDrawRect.apply(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/bitmap_canvas.dart:414:7)
  at RecordingCanvas.applyCommands(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/recording_canvas.dart:1029:5)
  at PersistedPicture._applyBitmapPaint.<anonymous function>(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/recording_canvas.dart:176:13)
  at aE_.$0(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/recording_canvas.dart:132:5)
  at commitScene(main.dart.js:351:3)
  at SurfaceSceneBuilder.build.<anonymous function>(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/surface.dart:51:9)
  at aO3.$0(/opt/hostedtoolcache/flutter/2.5.1-stable/x64/bin/cache/flutter_web_sdk/lib/_engine/engine/html/scene_builder.dart:542:7)

User Agent

Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Mobile Safari/537.36 Edg/94.0.992.31

[nivla360]

same here...

[zaitsevyan]

I got same issue. Lottie uses BlendMode.clear in its BaseLayer implementation (https://github.com/xvrh/lottie-flutter/blob/master/lib/src/model/layer/base_layer.dart#L66) But method flutter/bin/cache/flutter_web_sdk/lib/_engine/engine/html/bitmap_canvas.dart:stringForBlendMode throws exception for ui.BlendMode.clear

default:
      throw UnimplementedError(
          'Flutter Web does not support the blend mode: $blendMode');

[adriancsbna]

I have the same issue. Have you found a solution?

[yan-zaitsev]

@adriancsbna nope :(, we have removed few animations to avoid this error

[adriancsbna]

Hi @yan-zaitsev. We discovered that it was because the Web was rendered in HTML. If you force the rendering to CanvasKit it works perfectly.

[yan-zaitsev]

@adriancsbna, it is not a good solution, as there are more issues and glitches with CanvasKit renderers on mobile browsers. Maybe you can add some fallback and ignore this blend mode?

[Bilonik]

Hi Any Solution to this?

[yan-zaitsev]

@Bilonik we have switched to canvaskit renderer...

[iCarlosAugusto]

Solution: flutter build web --web-renderer canvaskit

flutter run -d chrome --web-renderer canvaskit

[aawhitfield]

My project is having issues where I can't call Firebase Cloud functions unless I build with the html renderer and now this package says I have to build with canvaskit insteaad. https://github.com/firebase/flutterfire/issues/10950#issuecomment-1544416119