Flutter 展示包：image/image.dart:Image in UI Widget

Question

We can work on images in Flutter using import 'package:image/image.dart' as ToolsImage; package to scale them with ToolsImage.copyResize() and manipulate individual pixels with ToolsImage.Image.getPixel(x,y)

To display image from memory bytes ( ByteData / Uint8List / List<int> ) we can use MemoryImage :

Container(child: Image(image: MemoryImage(image.data.buffer.asUint8List())))

I'm getting an exception:

Exception: Invalid image data

whichever List I use. What's wrong?

Answer 1

Remember to add HEADER to image bytes after format conversions!

ByteData imageByteData = await rootBundle.load('res/images/basic/dizzy-face.png');
List<int> values = imageByteData.buffer.asUint8List();
ToolsImage.Image? photo = ToolsImage.decodeImage(values);
photo = ToolsImage.copyResize(photo!, height: 32, width: 32);

removes header information (pixel-by-pixel manipulation removes header info).

Use:

List<int>? imageWithHeader = ToolsImage.encodeNamedImage(TEST_IMAGE, ".bmp");

and then:

Container(child: Image(image: MemoryImage(Uint8List.fromList(imageWithHeader))))

Last line enables us to convert package:image/image.dart to package:flutter/src/widgets/image.dart (UI Image Widget)