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'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)}.");
              );
}