Question 408718 in Flutter Question posted in
The official Flutter documentation can be found here.

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);
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution provided above worked well. Just had a problem with the image_downloader_web: ^2.0.6 package so I reverted to a manual download option.

    I first added the universal_html: ^2.2.4 package to my project and constructed the following method to download my screenshot:

    import 'package:http/http.dart' as HTTP;

...

void download(Uint8List bytes, {required String downloadName}) {
  final base64 = base64Encode(bytes);

  final anchor = html.AnchorElement(href: 'data:image/png;base64,$base64')..target = 'blank';

  anchor.download = downloadName;

  html.document.body?.append(anchor);

  anchor.click();

  anchor.remove();
}

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search