image_pixels

Lets you build a widget that depends on the width and height of some image, and the color of its pixels.

Try running the Example.

Extend the image background-color

The ImagePixels.container constructor adds a background-color that is the same color as the image pixel at the colorAlignment position.

For example, if you put the image inside of a Container you get this:

Container(
    width: 250,
    height: 100,                           
    alignment: Alignment.center,
    child: 
        Container(    
            width: 40.0, 
            height: 60.0, 
            child: Image(image: myImageProvider),
        ),
);


Now, if you wrap it with an ImagePixels.container:

ImagePixels.container(
    imageProvider: myImageProvider,    
    colorAlignment: Alignment.topLeft,
    child: 
        Container(
            width: 250,
            height: 100,                           
            alignment: Alignment.center,
            child: 
                Container(    
                    width: 40.0, 
                    height: 60.0, 
                    child: Image(image: myImageProvider),
                ),
        );
);


Using a builder

The ImagePixels constructor lets you define an image through an imageProvider, and then use a builder to build a child widget that depends on the image dimension and the color of its pixels.

The default constructor lets you provide the imageProvider, the builder, as well as a defaultColor to be used when reading pixels outside of the image (or while the image is downloading).

For example, this will print the size of the image:

ImagePixels(
    imageProvider: imageProvider,
    defaultColor: Colors.grey,
    builder: (context, img) => Text("Img size is: ${img.width} × ${img.height}"),
    );

Builder parameters

The builder provides an img parameter of type BuilderFromImage, with the following information:

  • If the image is already available, img.hasImage is true, and img.width and img.height indicate the image dimensions.

  • While the image is not yet available, img.hasImage is false, and img.width and img.height are null.

  • The functions img.pixelColorAt() and img.pixelColorAtAlignment() can be used in the builder to read the color of the image pixels.

  • If the coordinates point to outside of the image, or if the image is not yet available, then these functions will return the defaultColor provided in the ImagePixels constructor.

  • The img.uiImage parameter contains the image as a ui.Image type. It will be null while the image is still downloading.

  • The img.byteData parameter contains the image as a ByteDate type. It will be null while the image is still downloading.


Other use cases

  • Getting the tapped pixel color — By wrapping the child of the ImagePixel with a GestureDetector you get the tapped position, and then it's easy to get the color of the tapped image pixel.

  • Modifying the image — The child of the ImagePixel can be a CustomPainter, and then you can use a canvas to paint whatever you want on top of the image, or else create an entirely new image from the original image pixels.



The Flutter packages I've authored:

My Medium Articles:

My article in the official Flutter documentation:


Marcelo Glasberg:
https://github.com/marcglasberg
https://twitter.com/glasbergmarcelo
https://stackoverflow.com/users/3411681/marcg
https://medium.com/@marcglasberg

Libraries

image_pixels