image_pixels 3.0.0

Lets you extend the background color of an image, or else build any widget that depends on an image width/height or 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.

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 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 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 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. Try running the Example.

• 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
• fast_immutable_collections
• 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
• themed

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: русский)
• The New Way to create Themes in your Flutter App

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