1

I'm screenshotting one widget and have it as Uint8List.

Path provider and Share Plus doesn't support sharing files on web. Is anyone manage to share image as Uint8List from web?

2 Answers 2

1

Not sure if we could share the image but we can download an image with uint8List. Try the following

In index.html add this script

<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>

Use this in flutter

import 'dart:html' as html; //ignore: avoid_web_libraries_in_flutter
import 'dart:js' as js;
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    Key ? key
  }): super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key ? key
  }): super(key: key);

  @override
  State < MyHomePage > createState() => _MyHomePageState();
}

class _MyHomePageState extends State < MyHomePage > {
  final ImagePicker _picker = ImagePicker();
  XFile ? image;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InkWell(
                onTap: () async {
                  image = await _picker.pickImage(source: ImageSource.gallery);
                },
                child: const Icon(
                  Icons.upload,
                  color: Colors.black,
                ),
              ),
              const SizedBox(
                  height: 50,
                ),
                TextButton(
                  onPressed: () async {
                    // Directory tempDir = await getTemporaryDirectory();
                    // String tempPath = tempDir.path;
                    // print(tempPath);
                    saveImg(await image!.readAsBytes(), "downloadImg.png");
                  },
                  child: const Text("SHARE"))
            ],
          ),
        ),
      ),
    );
  }

  void saveImg(Uint8List bytes, String fileName) =>
  js.context.callMethod("saveAs", [
    html.Blob([bytes]),
    fileName
  ]);
}

2
  • Thank you! I was thinking to upload it to firebase and give user link but that was a solid solution.
    – mirkancal
    Jun 4, 2022 at 19:24
  • That also didn't work. I tried sending an image with its url. You can send them a url though Jun 4, 2022 at 19:39
1

To download Uint8List as image on flutter web we need to create a function:

import 'dart:html' as html;
import 'dart:typed_data';

void downloadUint8ListAsImage(Uint8List imageBytes, String fileName) {
  final html.Blob blob = html.Blob([imageBytes], 'image/png');

  final String url = html.Url.createObjectUrlFromBlob(blob);

  html.AnchorElement(href: url)
    ..setAttribute('download', fileName)
    ..click();

  html.Url.revokeObjectUrl(url);
}

and call it:

 ElevatedButton(
     onPressed: () {
        final Uint8List imageBytes = /* Your Uint8List here */;
        downloadUint8ListAsImage(imageBytes, 'example.png');
     },
     child: Text('download image'),
 )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.