Flutter Web Image Cropping On Mobile Not Working (RepaintBoundary and package screenshot: ^2.1.0)

Question

I'm working on a flutter web project and i have a page that pick and uploads Images and user can zoom in or out to crop image

the problem is: Cropping images on web on desktops working properly but on web on mobile not working

i wrapped the function in button that triggers code with try {}catch (e){} and added a snackbar to get any error on mobile but i got nothing i think it stuck in this function or RenderRepaintBoundary doesn't work on flutter web on mobile or not compatible or something I'm not sure

if someone can help or provide alternative solution or workaround i would be grateful

I used this package that zooms in / out and crop images cropperx: ^1.1.1 but its not working on mobile web then i tried photo_view: ^0.14.0 to zoom in/out with screenshot: ^2.1.0 to get the cropped image but it does't work on mobile web also

then i removed screenshot: ^2.1.0 and wrapped my PhotoView with RepaintBoundary and gave it a GlobalKey and used it with function

takescrshot() async {

  RenderRepaintBoundary boundary = scr.currentContext.findRenderObject();
   var image = await boundary.toImage();
   var byteData = await image.toByteData(format: ImageByteFormat.png);
   var pngBytes = byteData.buffer.asUint8List();
   print(pngBytes);

 }

and i get cropped image on web on desktops but mobile doesn't work

Answer 1

After more debugging i found the error was

/Assertion failed: org-dartlang-sdk:///lib engine/engine/html/scene_builder.dart:94:16_ && matrix4 ［0］== window.devicePixelRatio matrix4[5] == window.devicePixelRatio is not true

and i fixed it running build with

flutter build web --web-renderer canvaskit