image_pixels 1.0.0

Lets you extend the background color of an image, or else build any widget that depends on the image width/height, and the color of its pixels.

image_pixels

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

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, and 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: ({
          bool hasImage,
          int width,
          int height,
          ui.Image image,
          ByteData byteData,
          Color Function(int x, int y) pixelColorAt,
          Color Function(Alignment alignment) pixelColorAtAlignment,
        }) =>
            Text("The image size is: $width x $height"),
      );

Builder parameters

The builder parameter is of type BuilderFromImage, with the following parameters:

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

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

• The defaultColor will be used when reading pixels outside of the image, or while the image is downloading.

• The functions pixelColorAt and pixelColorAtAlignment can be used by 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 default-color provided in the ImagePixels constructor.

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

• The byteData parameter contains the image already converted into 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:

• async_redux
• provider_for_redux
• i18n_extension
• align_positioned
• network_to_file_image
• image_pixels
• matrix4_transform
• back_button_interceptor
• indexed_list_view
• animated_size_and_fade
• assorted_layout_widgets
• weak_map

My Medium Articles:

• Async Redux: Flutter’s non-boilerplate version of Redux (versions: Português)
• i18n_extension (versions: Português)
• Flutter: The Advanced Layout Rule Even Beginners Must Know (versions: русский)

My article in the official Flutter documentation:

• Understanding constraints

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