Creating image masks in flutter

Question

Flutter provides several ways for masks based on paths i.e. clip paths. I am trying to figure out a way where one could take an image with transparency layer like example below and use that image to mask another image / view or as a general mask.

My first instinct was to look at CustomPaint class, but I can't figure it out past this initial idea.

@pskink after some digging `BlendMode.dstIn` looks like exactly what I was looking for! Thank you, do you want to write up answer about this for others so I can accept it? — Ilja, Dec 08 '18 at 08:45

score 6 · Accepted Answer · edited Dec 19 '22 at 17:45

6

Flutter has BoxDecoration class that takes in BlendMode enum. By utilising these you can achieve various mask effects using images, for my particular case above dstIn was a solution.

edited Dec 19 '22 at 17:45

Eugene Kuleshov

31,461
5
66
67

answered Dec 08 '18 at 09:27

Ilja

44,142
92
275
498

4

@lija could you please give us an example. I'm having problem to mask two images. – rezam Feb 18 '19 at 16:12

Daniel Wilson · Answer 2 · 2020-03-03T07:56:46.603

I have posted an answer to my own same problem here, using a custom painter class with a squircle mask and image.

  @override
  void paint(Canvas canvas, Size size) {
    if (image != null && mask != null) {
      var rect = Rect.fromLTRB(0, 0, 200, 200);
      Size outputSize = rect.size;
      Paint paint = new Paint();

      //Mask
      Size maskInputSize = Size(mask.width.toDouble(), mask.height.toDouble());
      final FittedSizes maskFittedSizes =
          applyBoxFit(BoxFit.cover, maskInputSize, outputSize);
      final Size maskSourceSize = maskFittedSizes.source;

      final Rect maskSourceRect = Alignment.center
          .inscribe(maskSourceSize, Offset.zero & maskInputSize);

      canvas.saveLayer(rect, paint);
      canvas.drawImageRect(mask, maskSourceRect, rect, paint);

      //Image
      Size inputSize = Size(image.width.toDouble(), image.height.toDouble());
      final FittedSizes fittedSizes =
          applyBoxFit(BoxFit.cover, inputSize, outputSize);
      final Size sourceSize = fittedSizes.source;
      final Rect sourceRect =
          Alignment.center.inscribe(sourceSize, Offset.zero & inputSize);

      canvas.drawImageRect(
          image, sourceRect, rect, paint..blendMode = BlendMode.srcIn);
      canvas.restore();
    }
  }

Result:

score 1 · Answer 3 · answered Apr 04 '23 at 12:45

Here is example that converts any white pixel in the mask image to transparent in the main image.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as img;

Image? _image;

Future<void> _loadImage(String maskPath, String imgPath) async {
  ByteData data = await rootBundle.load(maskPath);
  List<int> bytes = data.buffer.asUint8List();
  img.Image mask = img.decodeImage(Uint8List.fromList(bytes))!;
  data = await rootBundle.load(imgPath);
  bytes = data.buffer.asUint8List();
  img.Image image = img.decodeImage(Uint8List.fromList(bytes))!;
  for (int y = 0; y < mask.height; y++) {
    for (int x = 0; x < mask.width; x++) {
      if (mask.getPixel(x, y) == img.getColor(255, 255, 255, 255)) {
        image.setPixel(x, y, img.getColor(0, 0, 0, 0));
      }
    }
  }
  _image = Image.memory(Uint8List.fromList(img.encodePng(image!)));
}

dependencies:
  image: ^3.0.1

Creating image masks in flutter

3 Answers3

Linked