How to embed watermark (Text or Image) in Flutter

Question

I created an app with image picker and I want to embed a text or image to that selected picture and saved it to gallery.

👇 My App

👇 I tried to create this

This is the code I used for image picker

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Watermark',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File _pickedImage;

  Future pickAnImage() async {
    final pickedFile =
        await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _pickedImage = File(pickedFile.path);
    });
  }

  _saveImage() {
    //TODO: Save image to gallery
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Watermark"),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              children: <Widget>[
                _pickedImage == null
                    ? TextButton(
                        child: Text("Pick an Image"),
                        onPressed: pickAnImage,
                      )
                    : Column(
                        children: [
                          Image.file(_pickedImage),
                          SizedBox(
                            height: 50.0,
                          ),
                          TextButton(
                              onPressed: _saveImage, child: Text("Save Image"))
                        ],
                      ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I followed the below tutorial but it is freeze the app and I couldn't implement it.

Tutorial

https://medium.com/flutter-community/add-watermark-over-image-in-flutter-e7353e3cf603

Can anyone help me please?

Answer 1

You can try using this dependency:

As suggested by the author, this example is similar to your query

import 'dart:io';
import 'package:image/image.dart';
void main() {
  // Create an image
  Image image = Image(320, 240);
  
  // Draw some text using 24pt arial font
  drawString(image, arial_24, 0, 0, 'Hello World');
  
  
  // Save the image to disk as a PNG
  File('test.png').writeAsBytesSync(encodePng(image));
}

Image downloaded from this link.