'Screenshot' package is not saving the image in flutter web-CodePudding

I'm trying to save a picture of widget which contains a image and a few texts with it. I tried the screenshot package and it is working perfectly fine with the Text widgets and a few others as well, but when I try to put a image inside it and save the screenshot saves the blank image with no image in it. Here is the code, and to be clear I'm not trying to save this image only which is already in my assets but with a few other widgets around it.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:screenshot/screenshot.dart';
import 'package:stationary/utils/app_images.dart';

import 'card_screen/components/save_image.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  Uint8List? _imageFile;
  ScreenshotController screenshotController = ScreenshotController();
  @override
  Widget build(BuildContext context) {
    print("buildt");
    return Scaffold(
      body: Center(
          child: Screenshot(
        controller: screenshotController,
        child: Column(
          children: [
            Text("Header", style: Theme.of(context).textTheme.headline3),
            SizedBox(
              child: GestureDetector(
                onTap: () {
                  screenshotController.capture().then((image) {
                    //Capture Done
                    setState(() {
                      _imageFile = image!;
                      print(_imageFile == null);
                    });
                    saveInBrowser(image!);
                  }).catchError((onError) {
                    print(onError);
                  });
                },
                child: Container(
                    width: 300.0,
                    height: 500.0,
                    child: Image.asset('assets/images/clean-code.png',
                        fit: BoxFit.cover)),
              ),
            ),
            Text("I am subtitle place holder",
                style: Theme.of(context).textTheme.subtitle1),
          ],
        ),
      )),
    );
  }
}

Save In Browser function

void saveInBrowser(Uint8List bytes) {
  final dataUri = 'data:text/plain;base64,${base64.encode(bytes)}';

  html.document.createElement('a') as html.AnchorElement
    ..href = dataUri
    ..download = 'image.png'
    ..dispatchEvent(html.Event.eventType('MouseEvent', 'click'));
}

I was trying to save the image and texts as the screenshot but got only the widgets and when tried to work with images only got the blank.

CodePudding user response：

You can use image_downloader_web package like this:

Future<void> saveInBrowser(Uint8List bytes) async{
  final WebImageDownloader _webImageDownloader = WebImageDownloader();

  await _webImageDownloader.downloadImageFromUInt8List(uInt8List: bytes);
}

and also you need to run it in release mode according to this open github issue, run this in terminal:

flutter run -d web-server --web-port 3344 --release --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false

also remember to build it with this config too.