Share local image with Flutter

Question

I want to share an image that I took from the CameraController.

I location of the file is as example /data/user/0/com.user.test/cache/2019-09-10 16:32:52.281842.png

How it is possible to share this local image?

I added these two line for read/write to local storage:

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

I use the share component from https://pub.dev/packages/esys_flutter_share which works great.

void _sharePicture() async {
    print('Share picture');
    print(this.imagePath);

    final ByteData bytes = await rootBundle.load(this.imagePath);
    await Share.file('esys image', 'esys.png', bytes.buffer.asUint8List(), 'image/png', text: 'My optional text.');
  }

this.imagePath is the local location of the file: :/data/user/0/com.user.test/cache/2019-09-10 16:32:52.281842.png

Do you first have to save the image? And the use it for sharing? How is it possible to share this local image?

Solution

The idea is share Uint8List

This demo use camera_camera package's example. https://github.com/gabuldev/camera_camera/tree/master/example
camera_camera package https://pub.dev/packages/camera_camera is an greate package have well made features and use camera plugin inside

code snippet
after click take picture, the system return a file (val in this example), read bytes and transfer to Uint8List

  print("path ${val}");
  List<int> bytes = await val.readAsBytes();
  Uint8List ubytes = Uint8List.fromList(bytes);
  await Share.file('ESYS AMLOG', 'amlog.jpg', ubytes, 'image/jpg');

full code

import 'dart:io';


import 'package:flutter/material.dart';
import 'package:camera_camera/camera_camera.dart';
import 'dart:typed_data';
import 'package:esys_flutter_share/esys_flutter_share.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  File val;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Rully")),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.camera_alt),
            onPressed: () async {
              val = await showDialog(
                  context: context,
                  builder: (context) => Camera(
                        mode: CameraMode.fullscreen,
                        orientationEnablePhoto: CameraOrientation.landscape,
                        /*
                        imageMask: CameraFocus.square(
                          color: Colors.black.withOpacity(0.5),
                        ),
                        */
                      ));

              print("path ${val}");
              List<int> bytes = await val.readAsBytes();
              Uint8List ubytes = Uint8List.fromList(bytes);
              await Share.file('ESYS AMLOG', 'amlog.jpg', ubytes, 'image/jpg');

              setState(() {});
            }),
        body: Center(
            child: Container(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width * 0.8,
                child: val != null
                    ? Image.file(
                        val,
                        fit: BoxFit.contain,
                      )
                    : Text("Tire a foto"))));
  }
}

demo screen
In camera_camera example take picture button will show in landscape mdoe
file path display in bottom

For camera plugin official example, I only change the following
code snippet

void onTakePictureButtonPressed() {
    takePicture().then((String filePath) async{
      if (mounted) {
        setState(() {
          imagePath = filePath;
          videoController?.dispose();
          videoController = null;
        });
        if (filePath != null) {
          showInSnackBar('Picture saved to $filePath');
          File val = File(filePath);
          List<int> bytes = await val.readAsBytes();
          Uint8List ubytes = Uint8List.fromList(bytes);
          await Share.file('ESYS AMLOG', 'amlog.jpg', ubytes, 'image/jpg');
        }
      }
    });
  }