Flutter/Mediapipe: how to save a Flutter Canvas/CustomPainter with mediapipe pose outline to an image file? - flutter-layout

Question

We are using code shown below from this package package:google_mlkit_pose_detection/google_mlkit_pose_detection.dart (on https://pub.dev/packages/google_mlkit_pose_detection)
to save the phone camera image with mediapipe pose outline to an image file on the phone. The library shows key points of human pose like shoulders and arms with circles and lines using Canvas and CustomPainter. We can see these on the phone screen but we want to save the image and the human pose points to a file in the phone. In other words we want to save the Painting into an image on the phone
A similar question was asked here Flutter: How would one save a Canvas/CustomPainter to an image file? but without the mediapipe component - we tried their solution but it didn't work for us.
The main problem in the code example shown below is that in the line picture = recorder.endRecording(); picture is always null.
import 'dart:math';
import 'dart:typed_data';
import 'dart:ui';
import 'dart:ui' as ui;
import 'package:ace_example/painters/keypoints.dart';
import 'package:flutter/material.dart';
import 'package:google_mlkit_pose_detection/google_mlkit_pose_detection.dart';
import 'coordinates_translator.dart';
class PosePainter extends CustomPainter {
PosePainter(this.poses, this.absoluteImageSize, this.rotation);
final List<Pose> poses;
final Size absoluteImageSize;
final InputImageRotation rotation;
Picture? picture;
final paintMid = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2.0
..color = const Color.fromRGBO(224, 224, 224, 1);
final paintLeft = Paint()
..style = PaintingStyle.fill
..strokeWidth = 2.0
..color = const Color.fromRGBO(255, 138, 0, 1);
final paintRight = Paint()
..style = PaintingStyle.fill
..strokeWidth = 2.0
..color = const Color.fromRGBO(0, 217, 231, 1);
final cycleRadius = 2.0;
final cycleBorderRadius = max(2.0 + 1, 2.0 * 1.2);
final lineWidth = 6.0;
final posePoints = DownwardDogPoints();
#override
void paint(Canvas canvas, Size size) {
final recorder = ui.PictureRecorder();
final canvas = Canvas(
recorder,
Rect.fromPoints(
const Offset(0.0, 0.0), const Offset(0.0, 0.0)));
for (final pose in poses) {
pose.landmarks.forEach((poseType, landmark) {
// draw circle
// white
canvas.drawCircle(
Offset(
translateX(landmark.x, rotation, size, absoluteImageSize),
translateY(landmark.y, rotation, size, absoluteImageSize),
),
cycleBorderRadius,
paintMid);
}
});
}
picture = recorder.endRecording();
}
Future<Image> generateImage() async {
// ui.Image img = (await picture.toImage(384, 683)) as Image;
// return img;
if (picture != null){
ui.Image img = await picture!.toImage(384, 683);
// final pngBytes = await img.toByteData(format: ui.EncodingFormat.png());
ByteData pngBytes = (await img.toByteData(format: ImageByteFormat.png))!;
Uint8List imgList = Uint8List.view(pngBytes.buffer);
return Image.memory(imgList);
} else {
print("Picture is empty");
}
Uint8List imgList = Uint8List.fromList([0, 0, 0 ,0]);
return Image.memory(imgList);
}
#override
bool shouldRepaint(covariant PosePainter oldDelegate) {
return oldDelegate.absoluteImageSize != absoluteImageSize ||
oldDelegate.poses != poses;
}
}