The Image Widget in Flutter has built-in support for files in the form of file, network, and memory.
However, these only support regular compressed image files or binary data, such as jpg, png, webp files, etc. There is no support for raw
rgba binary data.
Raw binary data here refers to the array of bytes consisting of the color values of each pixel of an image. A picture has width x height pixel points, the color value of a pixel point is stored with 32bit, divided into 4 channels, each channel occupies 8bit, respectively, red, green, blue, transparency (RGBA), this array is the collection of color values of each pixel point, dart in general use
In general, considering the efficiency of network transmission, algorithms are used to compress this data, so you will see that there are various image compression algorithms and file formats.
You may ask when there is a need to load the raw rgba data of a picture directly?
Here’s a simple example: loading an image in chunks. After decoding the image, split it into rectangular areas, each rectangle will have a raw rgba data, and give it to Image to render, which can reduce a certain GPU memory pressure and reduce the probability of GPU OOM or black screen.
To support raw rgba, it is actually very simple, there is a method
dart:ui package that can be used directly, provided that the raw binary data, width and height are available.
Image (dart:ui) object you can leave it to the
RawImage widget to load. But
RawImage is too low-level, can we just use the
Image widget? Because we need to reuse the
Of course you can. A quick look at the constructor of the
Image widget shows that we need an
ImageProvider, so the problem is further reduced to how to write an
ImageProvider to support raw rgba data.
To implement an
ImageProvider, we need to implement the key method
load. Let’s take
MemoryImage as an example.
Obviously, we need to think of a way to construct a
Codec for raw rgba data.
The secret is in the implementation of the
ImageDescriptor from the data, and then extract the step
descriptor.installCodec() to get the
Codec of the raw rgba data, and then implement a
RawImageProvider of your own.
Detailed code is available at: https://github.com/yrom/flutter_raw_image_provider/blob/master/lib/raw_image_provider.dart
If you also happen to have this need, you can add the pub dependency directly.