如何将 'dart:ui' 图像渲染到 Flutter 中？

Question

我将一些图像加载到内存中，这些图像的类型为“dart:ui”中的图像。但我需要在我的 Flutter 应用程序中渲染这些图像。我该怎么做呢？

Answer 1

您可以将 ui.Image 转换为 Image 小部件

final pngBytes = await uiimage.toByteData(format: ImageByteFormat.png);

return Image.memory(
  Uint8List.view(pngBytes!.buffer)
);

Answer 2

使用 Flutter 的RawImage小部件。

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

Answer 3

我最终创建了一个自定义小部件来解决这个问题。这是完整的代码：

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