renderToContext2D method Null safety

void renderToContext2D(
  1. dynamic context2D
)

Renders the signature to a HTML canvas.

Since this method is defined in the state object of SfSignaturePad, you have to use a global key assigned to the SfSignaturePad instance to call this method. This snippet shows how to use renderToContext2D in SfSignaturePadState.

Note: It requires dart:html import.

  • Create a global key.
final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
SfSignaturePad(
  key: _signaturePadKey,
 );
  • Call the renderToContext2D using the state object to export the signature into html canvas in web platform.
final canvas = html.CanvasElement(
       width: 500,
       height: 500);
final context = canvas.context2D;
_signaturePadKey.currentState!.renderToContext2D(context);
final blob = await canvas.toBlob('image/jpeg', 1.0);
final completer = Completer<Uint8List>();
final reader = html.FileReader();
reader.readAsArrayBuffer(blob);
reader.onLoad.listen((_) => completer.complete(reader.result));
Uint8List imageData = await completer.future;

Implementation

void renderToContext2D(dynamic context2D) {
  final RenderObject? signatureRenderBox = context.findRenderObject();

  if (signatureRenderBox is RenderSignaturePad) {
    signatureRenderBox.renderToContext2D(context2D);
  }
}