How to get the color of the image pixel on which I clicked?

Question

I have an image, specifically, it\'s loaded in from Image.asset().

It\'s wrapped in an extended widget, and has its own context.

I can click on it

Answer 1

I don't know if you are still looking for a solution.

I just made this prototype for you... hope is clear enough.

Here's a video of the result.

By the way, the image library has plenty of methods to workaround what you need... in case you need it, and pixel values are accessible as List, so you can workaround the KML colors and treat the list as a grid (rows, cols math to find the index).

Warning: the library uses a different color format (#AABBGGRR), but can be converted easily though.

UPDATE:

I made a v2 based on the limitations noted in the comments, but change the original snippet to show both approaches. This one generates a snapshot of whatever widget you want (so it takes transforms/colorization/box fittings/whatever u have rendered on screen).

Gives you a lot of versatility, if you don't have to animate or invalidate the widget often.

Check the demo in youtube.

Answer 2

I'd like to add an answer, only available since September 2020.

If you need to read image pixels of an image you have in your widget tree, you can use the ImagePixels widget from the https://pub.dev/packages/image_pixels package (note: I am the author of the package).

Note, you don't need to preload it manually from Image.asset(). You just need to provide the imageProvider. You need to calculate yourself the relative position from the absolute position given by the GestureDetector:

// Some (x, y) position you got from the GestureDetector.
var x = 50;
var y = 25;

@override
Widget build(BuildContext context) {
    return ImagePixels(
              imageProvider: imageProvider,
              builder: (context, img) =>
                  double xRelative = ... // Calculate from x and img.width;
                  double yRelative = ... // Calculate from y and img.width;
                  Text(
                     "Pixel color is: ${img.pixelColorAt(xRelative, yRelative)}.");
              );
}