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.
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),
),
);
);
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}"),
);
The builder
provides an img
parameter of type BuilderFromImage
, with the following
information:
-
If the image is already available,
img.hasImage
istrue
, andimg.width
andimg.height
indicate the image dimensions. -
While the image is not yet available,
img.hasImage
isfalse
, andimg.width
andimg.height
arenull
. -
The functions
img.pixelColorAt()
andimg.pixelColorAtAlignment()
can be used in thebuilder
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 theImagePixels
constructor. -
The
img.uiImage
parameter contains the image as aui.Image
type. It will benull
while the image is still downloading. -
The
img.byteData
parameter contains the image as aByteDate
type. It will benull
while the image is still downloading.
-
Getting the tapped pixel color — By wrapping the child of the
ImagePixel
with aGestureDetector
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 aCustomPainter
, 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:
Marcelo Glasberg:
https://github.com/marcglasberg
https://twitter.com/glasbergmarcelo
https://stackoverflow.com/users/3411681/marcg
https://medium.com/@marcglasberg