繪制圖片

image.png

PictureRecorder recorder = new PictureRecorder();
Canvas c = new Canvas(recorder);
final paint = new Paint();
paint.color = const Color(0xFF333333);
paint.style = PaintingStyle.fill;
c.drawRRect(
    RRect.fromRectAndRadius(
        Rect.fromPoints(Offset(0.0, 0.0), Offset(50.0, 50.0)),
        Radius.circular(2)),
    paint);
var picture = await recorder.endRecording().toImage(50, 50);
var pngImageBytes = await picture.toByteData(format: ImageByteFormat.png);
imgBytes = Uint8List.view(pngImageBytes.buffer);

可以通過
Image.memory(imgBytes)顯示

繪制文字

ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
  textAlign: TextAlign.center,
  fontWeight: FontWeight.w300,
  fontStyle: FontStyle.normal,
  fontSize: hitNode == node ? 20.0 : 15.0,
));
pb.pushStyle(ui.TextStyle(color: Color(0xff00ff00)));
pb.addText('${node.index + 1}');

ParagraphConstraints pc = ParagraphConstraints(width: node.rect.width);
//這里需要先layout, 后面才能獲取到文字高度
Paragraph paragraph = pb.build()..layout(pc);
//文字居中顯示
Offset offset = Offset(node.rect.width * (node.curIndex%level), node.rect.width * ((node.curIndex/level).floor() + 0.5) - paragraph.height/2);
canvas.drawParagraph(paragraph, offset);