Flutter：未處理的異常：類型“_ByteDataView”不是“Uint8List”類型的子類型

Question

我正在嘗試使用 圓形圖像文件創建自定義標記

但是，我遇到了[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: type '_ByteDataView' is not a subtype of type 'Uint8List'錯誤。

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

我嘗試過使用資產圖像、網絡圖像等。 都有錯誤。 我已經檢查過其他人的問題。 但是，我不知道有什么區別，突然我收到這些錯誤？

我在這里做錯了什么，如何讓它發揮作用？

Answer 1

您的 function 返回Future<ByteData?>所以讓編譯器通過將其聲明為返回類型來幫助您。 我的猜測是，在您使用 function 的地方，您期望結果是Uint8List 。 如果您更改它，編譯器應該會幫助您找到它。

這是一個更新和整理的版本（具有更清晰的級聯，刪除了明顯的類型等）

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