Screenshot and Image Downloading Not working in Flutter Web on Mobile

can you help me with a problem that I'm facing?

Im trying to create a web app that allows a user to download a screenshot of generated content.

I am making use of screenshot: ^3.0.0 for taking the screenshot and image_downloader_web: ^2.0.6 for downloading the images.

On desktop it's working fine but on mobile the whole thing falls apart, especially on safari. Both packages fall apart and refuse to work and at times destroy the whole interface. Here is the code I'm using:

Future<void> downloadContent(String imageURL) async {
  final response = await http.get(Uri.parse(imageURL));

  final generatedContent = AspectRatio(
    aspectRatio: 4 / 5,
    child: SizedBox(
      height: 1350,
      width: 1080,
      child: Stack(
        children: [
          Positioned.fill(
            child: Image.memory(
              response.bodyBytes,
              fit: BoxFit.contain,
            ),
          ),
          // add extra content here like a signature or something
        ],
      ),
    ),
  );

  final screenshotController = ScreenshotController();

  final screenshot = await screenshotController.captureFromWidget(
    generatedContent,
  );

  await WebImageDownloader.downloadImageFromUInt8List(uInt8List: screenshot);
}

Solution

The provided code works well. However, the .toImage() function for capturing screenshots is not compatible with the HTML renderer. To resolve this issue, consider using the CanvasKit renderer instead, which supports this functionality.

flutter run -d chrome --web-renderer canvaskit

To check on mobile during development

Step 1:

flutter run -d web-server --web-renderer canvaskit  --web-port 8080 --web-hostname 0.0.0.0

Step 2: Connect your mobile on same network as your system -> Go to browser (safari/chrome) -> Enter your system's ip with port.

http://your_system_ip:8080

For more info on web renderers : Web Renderers