如何用文字绘制自定义标记？

Question

我想画一个如下图所示的标记。

Custom Maker with text

我正在使用以下代码块来创建标记。

Future<Uint8List> getBytesFromCanvas(double escala, urlAsset) async {

    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);

    final ByteData dataI = await rootBundle.load(urlAsset);
    var imaged = await loadImage(new Uint8List.view(dataI.buffer));

    double width = ((imaged.width.toDouble() * escala).toInt()).toDouble();
    double height = ((imaged.height.toDouble() * escala).toInt()).toDouble();

    final Paint paint = Paint()..color = Colors.blue;
    final Radius radius = Radius.circular(20.0);
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(0.0, 0.0, 200, 100),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        paint);

    TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
    painter.text = TextSpan(
      text: 'Hello world',
      style: TextStyle(fontSize: 25.0, color: Colors.white),
    );
    painter.layout();
    painter.paint(canvas, Offset((width * 0.5) - painter.width * 0.5, (height * 0.5) - painter.height * 0.5));

    canvas.drawImageRect(
      imaged,
      Rect.fromLTRB(0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
      Rect.fromLTRB(0.0, 0.0, width, height),
      new Paint(),
    );

    final img = await pictureRecorder.endRecording().toImage(width.toInt(), height.toInt());
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
  }

但是我无法调整画布的大小以使其与图像和文本都匹配。