Get pixel color of an image from a Stack - Flutter

Viewed 122

I am trying to get the pixel color in Flutter. The image is one with Color Bars in it (RGB) - lets call it "Color Picker". I would like to get the color of the pixel of the "Color Picker" when user clicks on the Image.

I have used image_pixels example package but the Pointer Down event gives a totally different color from the image. Here is the code taken from the example itself:

class ImagePixel extends StatefulWidget {
  const ImagePixel({Key? key}) : super(key: key);

  @override
  State<ImagePixel> createState() => _ImagePixelState();
}

class _ImagePixelState extends State<ImagePixel> {
  final AssetImage flutter = const AssetImage('assets/tower_rgb.jpg');

  Offset localPosition = const Offset(-1, -1);
  Color color = const Color(0x00000000);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: Column(children: [
          const Expanded(
            flex: 1,
            child: Center(
              child: Text('Tap here to see the color'),
            ),
          ),
          Expanded(
            flex: 5,
            child: Padding(
              padding: const EdgeInsets.all(40),
              child: Container(
                color: Colors.grey,
                child: Listener(
                  onPointerMove: (PointerMoveEvent details) {
                    setState(() {
                      localPosition = details.localPosition;
                    });
                  },
                  onPointerDown: (PointerDownEvent details) {
                    setState(() {
                      localPosition = details.localPosition;
                    });
                  },
                  child: ImagePixels(
                    imageProvider: flutter,
                    builder: (BuildContext context, ImgDetails img) {
                      var color = img.pixelColorAt!(
                        localPosition.dx.toInt(),
                        localPosition.dy.toInt(),
                      );

                      WidgetsBinding.instance!.addPostFrameCallback((_) {
                        if (mounted) {
                          setState(() {
                            if (color != this.color) this.color = color;
                          });
                        }
                      });
                      return SizedBox(
                        width: 150,
                        height: 213,
                        child: Image(
                          image: flutter,
                        ),
                      );
                    },
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Column(children: [
              Container(
                width: 75,
                height: 55,
                color: color,
              ),
              Container(
                height: 20,
              ),
              Text(localPosition.toString()),
            ]),
          )
        ]),
      ),
    );
  }
}

As in the image, when I click on the Red rectangle, I get the value of Black.

Any suggestions as to how to go about this ?

Regards GPuthigeColor_picker

0 Answers
Related