Flutter : Draw over a photo and save the photo with my drawing - flutter

Question

I am stuck to find a solution for drawing over a photo and then save this photo including the drawing on the phone.
I am able to draw over it, but how to save the canvas with the photo ?
I tried different solution as below, but in this example I am stuck to get an ui.Image from my photo for adding it to the canvas.
Any angel for help on this ?
class PhotoPainterW extends ConsumerStatefulWidget {
PhotoPainterW({Key? key, required this.photoPath});
final String photoPath;
#override
_PhotoPainterWState createState() => new _PhotoPainterWState();
}
class _PhotoPainterWState extends ConsumerState<PhotoPainterW> {
List<Offset?> _points = <Offset?>[];
void saveImage(String photoPath) async {
ui.Image? image = await getUiImage(photoPath);
PictureRecorder recorder = PictureRecorder();
Canvas canvas = Canvas(recorder);
canvas.drawImage(image, new Offset(50.0, 50.0), new Paint());
SignaturePainter painter = SignaturePainter(points: _points);
var size = context.size;
painter.paint(canvas, size!);
final picture = recorder.endRecording();
final img = await picture.toImage(500,200);
final pngBytes = await img.toByteData(format: ImageByteFormat.png);
if (pictureAppDirectory == null) await initPhotoDirectory(context);
String drawPath = '${pictureAppDirectory!.path}/Drawing';
await Directory(drawPath).create(recursive: true);
File('$drawPath/test.png').writeAsBytesSync(pngBytes!.buffer.asInt8List());
OpenFile.open('$drawPath/test.png');
}
Future<ui.Image> getUiImage(String imageAssetPath) async {
Uint8List bytes = File(imageAssetPath).readAsBytesSync();
final ByteData assetImageByteData = ByteData.view(bytes.buffer);
image.Image? baseSizeImage = image.decodeImage(assetImageByteData.buffer.asUint8List());
ui.Codec codec = await ui.instantiateImageCodec(baseSizeImage!.getBytes());
ui.FrameInfo frameInfo = await codec.getNextFrame();
return frameInfo.image;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children:[
Image.file(File(widget.photoPath)),
Container(
child: new GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox? renderBox = context.findRenderObject() as RenderBox;
Offset _localPosition = renderBox.globalToLocal(details.globalPosition);
_points = new List.from(_points)..add(_localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
child: new CustomPaint(
painter: new SignaturePainter(points: _points),
size: Size.infinite,
),
),
),
]),
),
);
}
}
class SignaturePainter extends CustomPainter {
SignaturePainter({required this.points});
List<Offset?>? points;
#override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.blue
..strokeCap = StrokeCap.round
..strokeWidth = 10.0;
for (int i = 0; i < points!.length - 1; i++) {
if (points![i] != null && points![i + 1] != null) {
canvas.drawLine(points![i]!, points![i + 1]!, paint);
}
}
}
#override
bool shouldRepaint(SignaturePainter oldDelegate) => oldDelegate.points != points;
}

Answer 1

One option you have is use screenshot, and take screenshot from Stack widget.like this:
First wrap your Stack widget with Screenshot:
Screenshot(
controller: screenshotController,
child: Stack(
children:[...],
),
),
when you need your image do this:
screenshotController.capture().then((Uint8List image) {
//your image
}).catchError((onError) {
print(onError);
});
Note that this way may affect you image quality.