Flutter: How would one save a Canvas/CustomPainter to an image file?

Question

I am trying to collect a signature from the user and save it to an image. I have made it far enough that I can draw on the screen, but now I'd like to click a button to save to an image and store in my database.

This is what I have so far:

import 'package:flutter/material.dart';  class SignaturePadPage extends StatefulWidget {   SignaturePadPage({Key key}) : super(key: key);    @override   _SignaturePadPage createState() => new _SignaturePadPage(); } class _SignaturePadPage extends State<SignaturePadPage> {    List<Offset> _points = <Offset>[];    @override   Widget build(BuildContext context) {     return Container(       color: Colors.white,       child: GestureDetector(         onPanUpdate: (DragUpdateDetails details) {           setState(() {             RenderBox referenceBox = context.findRenderObject();             Offset localPosition =             referenceBox.globalToLocal(details.globalPosition);             _points = new List.from(_points)..add(localPosition);           });         },         onPanEnd: (DragEndDetails details) => _points.add(null),         child: new CustomPaint(painter: new SignaturePainter(_points)),       ),     );   } }  class SignaturePainter extends CustomPainter {   SignaturePainter(this.points);   final List<Offset> points;   void paint(Canvas canvas, Size size) {     Paint paint = new Paint()       ..color = Colors.black       ..strokeCap = StrokeCap.round       ..strokeWidth = 5.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);     }   }   bool shouldRepaint(SignaturePainter other) => other.points != points; } 

Not sure where to go from there...

Answer 1

You can capture the output of a CustomPainter with PictureRecorder. Pass your PictureRecorder instance to the constructor for your Canvas. The Picture returned by PictureRecorder.endRecording can then be converted to an Image with Picture.toImage. Finally, extract the image bytes using Image.toByteData.

Here's an example: https://github.com/rxlabz/flutter_canvas_to_image