image_pixels

Sponsor

image_pixels

This package allows you to build a widget that depends on, or uses the values of:

• The width and height of some image, or
• The colors of your image pixels

Try running the Example.

Extend the background-color of an image

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

For example, suppose you put an image inside a Container, like 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 dimensions 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 bounds or while the image is still downloading.

For example, this will display the size of the image as a Text widget:

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

Builder parameters

The builder function gives you access to an img parameter of type ImgDetails, 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 body to read the color of the image pixels.

• If the coordinates point to outside the image, or if the image is not yet available (is still being downloaded or failed to download), 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 ByteData 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 can obtain the x/y position where the user tapped the image. From this information, you can then determine the color of the tapped pixel. Try running the Example.

• Modifying the image: The child of the ImagePixel can be a CustomPainter. 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 pixels of the original image.

---

By Marcelo Glasberg

glasberg.dev
github.com/marcglasberg
linkedin.com/in/marcglasberg/
twitter.com/glasbergmarcelo
stackoverflow.com/users/3411681/marcg
medium.com/@marcglasberg

My article in the official Flutter documentation:

• Understanding constraints

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
• themed
• bdd_framework
• tiktoken_tokenizer_gpt4o_o1

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

image_pixels