How to add (text or icon) to image when the users share the image?


PLease help me , i want to put watermark on the image and text when the user want share it ,I tried a lot but could not get a correct result. Found this example only

my share image code is ::

import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';

void sharePhoto(String uurl) async {
  final urlImage = uurl;

  final url = Uri.parse(urlImage);
  final response = await http.get(url);

  final bytes = response.bodyBytes;

  final temp = await getTemporaryDirectory();
  final path = '${temp.path}/image.jpg';


  await Share.shareFiles([path], text: "dfgdfgdf gdf gdf g");


Below is an example of how you can overlay two images before you share it. If you are still looking for how to do it, you can use this as a starting point. Obviously, there has to be more sanity checking and all, treat this solely as a POC. Also take it a grain of salt, as I am a week and a half into dart/flutter myself, and will happily take advises/comments/suggestions re this code.

Here is a quick 8s video of the result.

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';
import 'package:http/http.dart' as http;
import 'package:image/image.dart' as img;
import 'package:path_provider/path_provider.dart';

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

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

  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  var imageBytes;

  Future<Uint8List> _getImage() async {
    final response = await http.get(Uri.parse(
    imageBytes = response.bodyBytes;
    return response.bodyBytes;

  void _share(Uint8List originallImage) async {
    final image = img.decodePng(originallImage)!;

    // get second image
    final responseWaterMark = await http
    final waterMark = img.decodeImage(responseWaterMark.bodyBytes)!;

    // resize watermark if needed (like in my case)
    final resizedWaterMark =
        img.copyResize(waterMark, height: image.height, width: image.width);

    // you may want to calculate the size of the resulting image
    // based on other parameters
    final mergedImage = img.Image(image.width, image.height);

    // copy image and watermark into the resulting image
    img.copyInto(mergedImage, image);
    img.copyInto(mergedImage, resizedWaterMark);

    // prep data in the temp folder
    final mergedImageBytes = img.encodePng(mergedImage);
    final directory = await getTemporaryDirectory();
    final path = directory.path;
    final imagePath = File('$path/image.png');

    // share image
    await Share.shareFiles([imagePath.path]);

  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Column(
      children: [
            future: _getImage(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column(
                  children: [
                    Image.memory( as Uint8List),
                      onPressed: () {
                      child: const Text(
                        'Share Image',
                        style: TextStyle(fontSize: 40),
              } else {
                return const Center(child: CircularProgressIndicator());

Answered By – jabbson

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *