Add a Watermark to Images in Flutter in 5 Lines

A photographer client of mine wanted app-level watermarks on every export — before the image ever reached social media. The first agency quote he got described native Kotlin and Swift work, platform channels, and a two-week timeline. I did it in Flutter with a Canvas, and the entire watermark logic fits in five lines. So, in this article, I will be showing you how you can add a watermark to images in Flutter in 5 lines of code.

For this purpose, you do not even need a third-party package. We will use Flutter's built-in dart:ui Canvas API plus the image package for encoding the result. Add this dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  image: ^4.2.0

The image package is a pure-Dart image manipulation library. We use it to decode the original image, get a dart:ui ui.Image from it, draw the watermark on a Canvas, and then encode the result back to bytes. No native code, no platform channels, works on Android, iOS, web, and desktop.

Let's jump into the coding part.

The 5 Lines That Do the Work

Here is the complete watermark function:

import 'dart:ui' as ui;
import 'package:image/image.dart' as img;
import 'package:flutter/rendering.dart';

Future<Uint8List> addWatermark(Uint8List bytes, String text) async {
  // 1. Decode the original image
  final decoded = img.decodeImage(bytes)!;
  // 2. Convert to a dart:ui image so we can paint on a Canvas
  final uiImage = await decodeImageFromList(
      Uint8List.fromList(img.encodePng(decoded)));
  // 3. Create a PictureRecorder + Canvas at the same dimensions
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  // 4. Draw the image, then paint the watermark text on top
  canvas.drawImage(uiImage, Offset.zero, Paint());
  final tp = TextPainter(
    text: TextSpan(text: text, style: const TextStyle(
      color: Color(0x66FFFFFF), // ~40% white
      fontSize: 24,
    )),
    textDirection: TextDirection.ltr,
  )..layout();
  tp.paint(canvas, Offset(16, uiImage.height - tp.height - 16));
  // 5. Encode the result back to PNG bytes
  final png = await recorder.endRecording().toImage(
      uiImage.width, uiImage.height);
  final byteData = await png.toByteData(format: ui.ImageByteFormat.png);
  return byteData!.buffer.asUint8List();
}

There it is — the core watermarking is the five paint lines: decode, convert, record, paint, encode. The rest is just helper scaffolding around them.

How It Works, Briefly

• decodeImageFromList turns the decoded bytes into a ui.Image that the Canvas can actually paint. The image package decodes formats like PNG and JPEG that dart:ui may not handle directly.
• PictureRecorder + Canvas is the standard way to paint off-screen. We draw the source image first with drawImage, then lay the TextPainter over it.
• The TextPainter is your watermark. The 0x66FFFFFF color is white at roughly 40% opacity — subtle enough to not wreck the photo, visible enough to matter. The Offset positions it in the bottom-left, 16 pixels from the edge.
• toImage() + toByteData() renders the recorded picture back to PNG bytes that you can save or upload.

Step: Save or Share the Result

Where those bytes go is up to you. The most common destination for my clients is the gallery, which needs gal (or image_gallery_saver):

dependencies:
  gal: ^2.3.0

import 'package:gal/gal.dart';

final watermarked = await addWatermark(bytes, '© YourStudio');
if (await Gal.hasAccess(toAlbum: true)) {
  await Gal.putImage(watermarked, album: 'Exports');
} else {
  await Gal.requestAccess(toAlbum: true);
  await Gal.putImage(watermarked, album: 'Exports');
}

On Android, also add this to your manifest:

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

For sharing directly to WhatsApp/Instagram without saving, swap Gal.putImage for Share.shareXFiles([XFile.fromData(watermarked)]) from the share_plus package. The watermark logic is identical either way.

Important Notes — What the 5 Lines Don't Tell You

1. The watermark is rasterized at the source image's resolution. If the user exports a 4,000-pixel photo, your 24px font scales with it and looks tiny. Scale the font size to the image width (fontSize: uiImage.width * 0.02) or the watermark will be invisible on large exports.
2. Opacity is your friend and your enemy. Too transparent and anyone crops it off; too opaque and it ruins the photo. I start at 40% white and let clients dial it. Remember the watermark is deterrence, not encryption — anyone determined can crop it, so position it across the center line if it truly matters.
3. PNG keeps the transparency, JPEG drops it. The code above encodes PNG, which is safe for all images. If you need JPEG (smaller files for social), use img.encodeJpg() on the decoded image instead of PNG — but do it on the input side, before the Canvas, and accept that JPEG's lossy compression will slightly soften the text edge.
4. decodeImageFromList is async and can be slow on huge images. For a 12-megapixel photo it takes a noticeable beat. Run it in an isolate (compute) if you process batches, or you will drop frames on the UI thread. compute(addWatermark, bytes) is a one-line change.
5. Text with emoji or non-Latin scripts can render with wrong fallback fonts. If you watermark with a company logo instead of text, draw an ui.Image of the logo with canvas.drawImageRect instead of a TextPainter.
6. Do not watermark only on the client for paid content. For a marketplace client, I watermark on-device for previews and strip-replace with a server-side full-res export. If your business is selling unwatermarked versions, the five-line client approach is a preview, not the final gate.

The Alternative Worth Knowing

The watermark package exists and does exactly this under the hood — same Canvas technique, wrapped in a convenient API with built-in scale and opacity options. It is fine, but it is a thin wrapper over what we just wrote, and for five lines I prefer zero dependencies. The one case where I reach for it: a watermark position enum (tile / bottom-right / center) with no interest in the internals.

That's it — a complete image watermark in Flutter, five core lines, no native code. Decode, convert to a ui.Image, paint the text on a Canvas, encode, done. Add the isolate, the font scaling, and the opacity tweak and you have a production watermark path that has held up on my clients' exports for two years.

Bonus: A Tiled Watermark in a Few More Lines

If you are watermarking for a photographer client, a single corner mark is trivial to crop. The deterrent version is a diagonal tiled watermark across the whole image. With the same Canvas it is a save → translate → rotate loop — still no native code:

void paintTiledWatermark(Canvas canvas, String text, double w, double h) {
  canvas.save();
  canvas.translate(w / 2, h / 2);
  canvas.rotate(-0.4);
  final tp = TextPainter(
    text: TextSpan(text: text, style: const TextStyle(
      color: Color(0x26FFFFFF), // ~15% white, subtle
      fontSize: 28,
    )),
    textDirection: TextDirection.ltr,
  )..layout();
  const step = 240.0;
  for (double x = -w; x < w; x += step) {
    for (double y = -h; y < h; y += step) {
      tp.paint(canvas, Offset(x, y));
    }
  }
  canvas.restore();
}

Call paintTiledWatermark(canvas, text, uiImage.width, uiImage.height) instead of the single-corner tp.paint inside your function. The rotation is why I rotate the whole canvas around the center before painting — each tile inherits the diagonal. At 15% opacity it does not ruin the image, and it makes the watermark nearly impossible to crop away cleanly. The trade-off is visual noise on an already busy photo; for clean product shots my clients prefer it, for people photos they almost always go back to the corner.

Batch-Processing Many Images Without Freezing the UI

A single watermark call is fast enough to run on the main isolate for most apps, but the moment you watermark a batch — a photographer exporting 200 images — you will drop frames and, on large images, risk an Out of memory churn. The fix is running the work on a background isolate with compute, and the change is small because our function already takes and returns plain byte arrays:

Future<List<Uint8List>> watermarkBatch(List<Uint8List> images, String text) async {
  return Future.wait(images.map((b) => compute(addWatermark, b)));
}

Three notes from actually running this in production. First, addWatermark must be a top-level function for compute to run it in an isolate — ours already is, so no refactor needed. Second, do not pass the watermark text inside each call if it is constant; capture it in a closure so you are not sending the same string across the isolate boundary a thousand times. Third, decodeImageFromList allocates full-size bitmaps, so on a low-end Android device a batch of 4,000px images can still exhaust memory; process them one at a time and stream the results out (write to disk or upload) instead of holding all of them in a list. That is the difference between a feature that ships and one that crashes on the client's cheapest test phone.

JPEG vs PNG — the Encoding Decision in Practice

The code returns PNG, which is the safe default: lossless, preserves the watermark edge, and works for every source format. But PNG files are large, and social platforms re-compress them anyway. If file size matters — most of my clients upload watermarked images to product catalogs — switch the final encoding:

final jpg = await png.toByteData(format: ui.ImageByteFormat.png);
// For JPEG output, re-encode the decoded source before painting:
final img.Image raw = img.decodeImage(bytes)!;
final img.Image out = img.copyResize(raw, width: raw.width);
// then encode with quality 85:
final jpegBytes = Uint8List.fromList(img.encodeJpg(out, quality: 85));

Encode JPEG from the source side (via the image package) and draw the watermark on that JPEG's decoded bytes; if you ask dart:ui for JPEG bytes directly it will still work, but you lose the quality control knob. JPEG at quality 85 is the sweet spot I use: roughly a third of the PNG size with no visible watermark degradation on phone screens. If the image must be archival (photographers selling prints), stay with PNG and eat the size.

FAQ — The Questions the Comments Always Ask

Q: Does this work on the web and desktop? Yes. dart:ui Canvas painting is platform-agnostic. The only divergence is saving: on the web you do not have a gallery, so you either trigger a download (via package:file_picker/save_file) or upload the bytes straight to your API.

Q: Can I watermark with a logo instead of text? Yes — decode the logo, convert to a ui.Image, and call canvas.drawImageRect(logo, srcRect, dstRect, Paint()) at your chosen position and size, instead of painting a TextPainter. That is the two-line change that most of my marketplace clients end up with.

Q: Why do my watermark fonts look thin or pixelated on large images? Because you are rasterizing text at the image's native resolution. On a 4,000px export, a 24px font is tiny — scale the fontSize relative to uiImage.width (I start at uiImage.width * 0.02) and it will look intentional on every size. If you need crisp text at huge zoom, render the text at a higher resolution (textScaler on a TextPainter is the simplest lever).

Q: Is 5 lines really accurate, or is this clickbait? The core paint operations are five lines — decode, convert, record, draw image, paint text, encode. The surrounding code (async plumbing, encode calls, save-to-gallery) is real scaffolding that production demands. The headline is the honest core: no plugin, no platform channel, five paint operations.

Q: When should I NOT watermark in the app at all? If you are selling high-resolution, unwatermarked files, the client-side watermark is a preview gate at best — anyone can extract the original from a decompiled app or a captured network call. Do the authoritative watermark server-side at export time and keep the app version for previews. I covered exactly this trade in the notes above, and it is the most important decision in this article.

I have also covered image compression and saving to gallery with this exact pattern — comment below with the image-processing task you are stuck on and I'll cover it next.

*Gulshan Yad

Understanding Watermark Purpose and Use Cases

Watermarking, far from being a mere aesthetic choice, serves several critical functions in digital content management, particularly for images. At its core, a watermark is an overlay that identifies the image's owner, source, or status. The primary driver is often copyright protection, acting as a visible deterrent against unauthorized use or distribution. By embedding a logo, name, or specific identifier, creators can assert their ownership, making it harder for others to claim the work as their own or use it without proper attribution.

Beyond copyright, watermarks are invaluable for branding. Companies and individuals often use them to reinforce their brand identity, ensuring that every piece of visual content they share carries their signature. This consistent branding helps in recognition and recall, turning shared images into marketing assets. Another significant use case is for 'proofing' – showing clients or collaborators a preview of work in progress without providing the final, high-resolution version. A prominent 'DRAFT' or 'PROOF' watermark ensures that these temporary versions aren't misused. Furthermore, in some scenarios, watermarks can serve a security function, embedding unique identifiers for tracking purposes or to indicate the image's classification (e.g., 'CONFIDENTIAL'). Understanding these varied purposes is the first step in designing an effective watermarking strategy for your Flutter application.

Choosing the Right Watermark Type and Placement

The effectiveness of a watermark isn't just about its presence; it's about its design, type, and strategic placement. Watermarks generally fall into two categories: text-based and image-based. Text watermarks are versatile, allowing for dynamic content like timestamps, usernames, or copyright notices. They are easy to generate and can be styled with various fonts, colors, and opacities. Image watermarks, typically logos or icons, offer stronger brand recognition and can be more visually appealing. The choice depends on your primary goal: text for information, image for branding.

Placement is equally crucial. A watermark can be subtle, tucked into a corner with low opacity, or prominent, stretching across the entire image. Corner placement is less intrusive, suitable for branding or light copyright assertion. Center placement, often with higher opacity, is common for proofing, making it difficult to use the image without removing the watermark. Tiled watermarks, repeating across the image, offer maximum protection against cropping but can be visually disruptive. The key is to strike a balance between visibility and non-intrusiveness. Consider the image's composition; avoid placing the watermark over critical details or faces. Opacity also plays a vital role: a semi-transparent watermark is less distracting but still noticeable, while a fully opaque one provides stronger protection but can detract from the image's aesthetic. Experimentation with different combinations of type, placement, and opacity is essential to find what works best for your specific application and user experience.

Performance Considerations for Large-Scale Watermarking

While adding a watermark to a single image in Flutter might seem trivial, scaling this operation to numerous or very large images introduces significant performance challenges. Image processing, especially operations involving pixel manipulation and rendering to a canvas, is computationally intensive. When dealing with images that are several megabytes in size or processing dozens of images simultaneously, you risk freezing the UI, consuming excessive memory, or even crashing the application if not handled carefully. The main UI thread in Flutter is responsible for rendering frames, and any long-running task on this thread will lead to jank and a poor user experience.

The most critical strategy for performance is to offload image processing to a separate execution context. In Flutter, this is achieved using Isolates. An Isolate is an independent event loop that runs in its own memory space, communicating with the main Isolate via message passing. By spawning a new Isolate for each large watermarking task or for batch processing, you ensure that the main UI thread remains free to handle user interactions and animations. Additionally, consider memory management: large images consume significant RAM. If possible, downscale images before watermarking if the final output doesn't require the original high resolution. Compressing the output image to an appropriate quality level (e.g., JPEG quality factor) can also reduce memory footprint and storage requirements. Implementing a robust loading and error handling mechanism, perhaps with progress indicators, further enhances the user experience during these potentially lengthy operations.

Enhancing User Experience with Intelligent Watermarking

An effective watermark is not just about protection; it's also about user experience. A poorly implemented watermark can be distracting, obscure important details, or frustrate users. Intelligent watermarking focuses on making the process seamless and the result aesthetically pleasing while still achieving its protective goals. This begins with thoughtful design: ensuring the watermark's color palette complements the image, its font is legible but not jarring, and its opacity is just right—visible enough to serve its purpose but transparent enough not to detract from the original content.

Consider adaptive placement and sizing. Instead of a fixed-size watermark, dynamically scale and position it based on the dimensions of the input image. For instance, a watermark might always occupy 10% of the image's width, or be placed consistently 20 pixels from the bottom-right corner, regardless of the image's resolution. Offering user-configurable options, such as choosing between a text or logo watermark, adjusting opacity, or selecting a predefined corner, can empower users and increase satisfaction. Providing a real-time preview of the watermarked image before final processing is a crucial UX feature, allowing users to fine-tune settings. For applications dealing with diverse image content, an algorithm that analyzes image luminosity or color distribution could even suggest optimal watermark colors or placement to ensure maximum contrast without being overbearing. Ultimately, intelligent watermarking is about balancing robust protection with a polished, user-friendly outcome.

Robustness and Security: Preventing Watermark Removal

While a client-side watermark applied in Flutter offers a good level of basic protection, it's crucial to understand its limitations regarding robustness and security. Any visible watermark can, in principle, be removed using image editing software, especially if it's placed in an empty area or has high transparency. The goal isn't necessarily to make it impossible to remove, but rather to make it difficult, time-consuming, and to degrade the image quality significantly during removal attempts. For truly high-security needs, forensic watermarking or server-side solutions are often employed, but for many common use cases, client-side techniques can be made reasonably robust.

Strategies to increase robustness include: placing the watermark over critical areas of the image, making it harder to crop out without losing essential content; using a tiled pattern across the entire image, which makes seamless removal extremely challenging; and employing a semi-transparent watermark that blends with the image, making it difficult to isolate and erase without leaving artifacts. Using a watermark that has a complex shape or varying opacity can also deter simple 'fill' or 'clone stamp' tools. While not strictly a 'security' measure in the cryptographic sense, these techniques aim to increase the effort required for removal, thus discouraging casual theft or misuse. It's also important to consider the legal

Key Takeaways

• Leverage Flutter's dart:ui canvas capabilities or a dedicated image manipulation package for straightforward watermarking.
• The core of watermarking in Flutter often involves drawing text or another image onto a Canvas over your base image.
• Achieve basic text or image watermarks with minimal code by focusing on PictureRecorder and Canvas operations.
• Carefully consider the watermark's opacity, color, and position to ensure it's effective without overly obscuring the original content.
• When saving watermarked images, specify the desired output format (e.g., PNG, JPEG) and quality settings to balance file size and clarity.