I have some images loaded into memory that are of type Image from 'dart:ui'. But I need to render these images in my Flutter app. How do I do this?
I have some images loaded into memory that are of type Image from 'dart:ui'. But I need to render these images in my Flutter app. How do I do this?
You can convert ui.Image to Image widget
final pngBytes = await uiimage.toByteData(format: ImageByteFormat.png);
return Image.memory(
Uint8List.view(pngBytes!.buffer)
);
I ended up creating a custom widget to solve this problem. Here is the full code:
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
class UIImage extends StatelessWidget {
final ui.Image image;
const UIImage({
Key key,
@required this.image,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return CustomPaint(painter: _UIImagePainter(image));
}
}
class _UIImagePainter extends CustomPainter {
final ui.Image image;
_UIImagePainter(this.image);
@override
void paint(Canvas canvas, Size size) {
canvas.drawImageRect(
image,
Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
Rect.fromLTWH(0, 0, size.width, size.height),
Paint(),
);
}
@override
bool shouldRepaint(_UIImagePainter oldDelegate) {
return image != oldDelegate.image;
}
}
This widget can help you on showing an image of ui package
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';
class UIImageDisplayWidget extends StatelessWidget {
final ui.Image uiImage;
final Widget placeholder;
UIImageDisplayWidget({
@required this.uiImage,
@required this.placeholder,
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: encodeImage(),
builder: (_, AsyncSnapshot<Uint8List> snapshot) {
if (snapshot.hasData) {
return Image.memory(snapshot.data);
} else {
return placeholder;
}
},
);
}
Future<Uint8List> encodeImage() async {
ByteData byteData =
await uiImage.toByteData(format: ui.ImageByteFormat.png);
return Uint8List.view(byteData.buffer);
}
}