Shimmer on flutter web throwing NoSuchMethodError

[SerhiiPtitsyn]

Shimmer on flutter web throwing "NoSuchMethodError: method not found: 'toString' on null". Only in web app running on Android on Chrome.

[calebvetter]

Running into this same issue. Only in mobile browsers (specifically tested on iOS Chroms and iOS Safari). Unfortunately the only logs I've got are the browser's console logs, which aren't as good a dart debug logs:

[Log] ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════ (dart_sdk.js, line 30369) [Log] The following TypeErrorImpl was thrown during a scheduler callback: (dart_sdk.js, line 30369) [Log] Unexpected null value. (dart_sdk.js, line 30369) [Log] (dart_sdk.js, line 30369) [Log] When the exception was thrown, this was the stack: (dart_sdk.js, line 30369) [Log] dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 239:26 DartError (dart_sdk.js, line 30369) [Log] dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:28 throw (dart_sdk.js, line 30369) [Log] dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 606:63 nullCheck (dart_sdk.js, line 30369) [Log] lib/_engine/engine/safe_browser_api.dart 409:96 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/safe_browser_api.dart 403:21 new (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/shaders/shader.dart 234:40 createImageBitmap (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/shader_mask.dart 110:25 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/shader_mask.dart 93:9 apply (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 367:5 build (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 655:11 build (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 674:14 build (dart_sdk.js, line 30369, x2) [Log] lib/_engine/engine/html/surface.dart 963:19 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 711:7 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/clip.dart 110:11 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 848:15 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 707:7 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/clip.dart 110:11 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 848:15 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 707:7 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/transform.dart 52:11 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 848:15 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/surface.dart 707:7 update (dart_sdk.js, line 30369) [Log] lib/_engine/engine/html/scene_builder.dart 536:25 (dart_sdk.js, line 30369) [Log] packages/flutter/src/widgets/unique_widget.dart.js 101144:32 buildScene (dart_sdk.js, line 30369) [Log] packages/flutter/src/widgets/unique_widget.dart.js 93033:58 compositeFrame (dart_sdk.js, line 30369) [Log] packages/flutter/src/widgets/unique_widget.dart.js 93761:39 drawFrame (dart_sdk.js, line 30369) [Log] packages/flutter/src/widgets/unique_widget.dart.js 189242:24 drawFrame (dart_sdk.js, line 30369) [Log] packages/flutter/src/widgets/unique_widget.dart.js 93721:21 (dart_sdk.js, line 30369) [Log] packages/flutter/src/scheduler/binding.dart.js 862:17 (dart_sdk.js, line 30369) [Log] packages/flutter/src/scheduler/binding.dart.js 830:37 handleDrawFrame (dart_sdk.js, line 30369) [Log] packages/flutter/src/scheduler/binding.dart.js 749:27 (dart_sdk.js, line 30369) [Log] lib/_engine/engine/platform_dispatcher.dart 1236:13 invoke (dart_sdk.js, line 30369) [Log] lib/_engine/engine/platform_dispatcher.dart 244:5 invokeOnDrawFrame (dart_sdk.js, line 30369) [Log] lib/_engine/engine/initialization.dart 190:45 (dart_sdk.js, line 30369) [Log] ════════════════════════════════════════════════════════════════════════════════════════════════════ (dart_sdk.js, line 30369)

[calebvetter]

Further investigation shows this is actually not an issue with the shimmer package, but an issue with Flutter's framework. https://github.com/flutter/flutter/issues/128349

The real issue is Flutter mobile web uses the html renderer by default which doesn't support shaders. There's a fix coming up for Flutter that will at least not throw errors (I assume), but I doubt the shimmer will actually render.

The real fix is to build with the --web-renderer=canvaskit flag. Then shimmer works great. Only downside is a larger download on mobile devices. Just make sure you show a good loading animation while the Flutter engine is downloading :)

[mariopepe]

Can confirm, I was hitting this error in the latest flutter version as of now 3.16.5 but by building and deploying with canvaskit I fixed the issue!

flutter build web --web-renderer=canvaskit