How to render 'dart:ui' Image into Flutter?

Viewed 6223

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?

4 Answers

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;
  }
}

Use Flutter's RawImage widget.

RawImage(
  // pass dart:ui.Image here
  image: yourImage,
  ...
)

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);
  }
}
Related