Flutter：未处理的异常：类型“_ByteDataView”不是“Uint8List”类型的子类型

Question

I am trying to create a custom marker with Round Image File

However, I am running into the [VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: type '_ByteDataView' is not a subtype of type 'Uint8List' error.

  resizeImage(Uint8List file,
      {int size = 150,
      bool addBorder = true,
      Color borderColor = Colors.orange,
      double borderSize = 20,
      Color titleColor = Colors.white,
      Color titleBackgroundColor = Colors.black}) async {
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);
    final Paint paint = Paint()..color;
    final double radius = size / 2;

    //make canvas clip path to prevent image drawing over the circle
    final Path clipPath = Path();
    clipPath.addRRect(RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
        Radius.circular(100)));
    canvas.clipPath(clipPath);

    //paintImage

    ui.Codec codec = await ui.instantiateImageCodec(file);
    ui.FrameInfo frame = await codec.getNextFrame();

    paintImage(
        canvas: canvas,
        rect: Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
        image: frame.image);

    if (addBorder) {
      //draw Border
      paint..color = borderColor;
      paint..style = PaintingStyle.stroke;
      paint..strokeWidth = borderSize;
      canvas.drawCircle(Offset(radius, radius), radius, paint);
    }

    //convert canvas as PNG bytes
    final _image = await pictureRecorder
        .endRecording()
        .toImage(size, (size * 1.1).toInt());
    final data = await _image.toByteData(format: ui.ImageByteFormat.png);

    //convert PNG bytes as BitmapDescriptor
    return data;
  }

I'd tried with the asset images, network image and more. All have the errors. I've checked with other people's questions. However, I have no clue what are the differences and suddenly I am getting these errors?

What have I done wrong here and how can make it work?

Answer 1

Your function returns Future<ByteData?> so let the compiler help you by declaring that as the return type. My guess is that where you use the function you are expecting the result to be Uint8List . If you change that, the compiler should help you find it.

Here's an updated and tidied version (with clearer cascades, removal of obvious types etc)

Future<ByteData?> resizeImage(
  Uint8List file, {
  int size = 150,
  bool addBorder = true,
  Color borderColor = Colors.orange,
  double borderSize = 20,
  Color titleColor = Colors.white,
  Color titleBackgroundColor = Colors.black,
}) async {
  final pictureRecorder = ui.PictureRecorder();
  final canvas = Canvas(pictureRecorder);

  //make canvas clip path to prevent image drawing over the circle
  canvas.clipPath(
    Path()
      ..addRRect(RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
        const Radius.circular(100),
      )),
  );

  //paintImage
  final codec = await ui.instantiateImageCodec(file);
  final frame = await codec.getNextFrame();

  paintImage(
    canvas: canvas,
    rect: Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
    image: frame.image,
  );

  if (addBorder) {
    //draw Border
    final radius = size / 2;

    final paint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderSize;
    canvas.drawCircle(Offset(radius, radius), radius, paint);
  }

  //convert canvas as PNG bytes
  final _image = await pictureRecorder.endRecording().toImage(
        size,
        (size * 1.1).toInt(),
      );

  return await _image.toByteData(format: ui.ImageByteFormat.png);
}