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 ?
