SfSignaturePad class

The Signature Pad widget allows you to capture smooth and more realistic signatures through drawing gestures. The widget allows you to save the signature as an image, which can be further synchronized with your devices and documents that need the signature.

You can customize the SfSignaturePad with below options.

• The width of the signature stroke can be customized by setting the minimumStrokeWidth and maximumStrokeWidth properties.
• The minimumStrokeWidth defines the minimum thickness of the signature stroke and the maximumStrokeWidth defines the maximum thickness of the signature stroke.
• The signature stroke width will be calculated based on the speed of the gesture, within the minimum and maximum stroke width ranges. So that the drawn signature will be more realistic.
• The stroke color of the SfSignaturePad can be customized using the strokeColor property.
• The background color of the SfSignaturePad can be customized using the backgroundColor property.

The onDrawStart, onDraw and onDrawEnd allows you to handle the gestures in SfSignaturePad

The SfSignaturePadState.toImage allows you to export the signature in SfSignaturePad to an image. The SfSignaturePadState.clear allows you to clear all the signature strokes in SfSignaturePad. The SfSignaturePadState.renderToContext2D allows you to export the signature in SfSignaturePad to a html canvas. SfSignaturePadState.renderToContext2D is used to export the signature as an image in web platform.

Note - Since the SfSignaturePadState.toImage, SfSignaturePadState.clear and SfSignaturePadState.renderToContext2D are defined in state object of SfSignaturePad, you have to use a global key assigned to the SfSignaturePad instance to call these methods.

Example

This snippet shows how to use a SfSignaturePad.

• Create a global key for SfSignaturePadState.

final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();

• Create the SfSignaturePad and set the properties and global key.

SfSignaturePad(
  minimumStrokeWidth: 3.0,
  maximumStrokeWidth: 6.0,
  backgroundColor: Colors.white,
  strokeColor: Colors.green,
  key: _signaturePadKey,
 );

• Handle the start, ondraw and completion of signature gestures in SfSignaturePad from onDrawStart, onDraw and onDrawEnd.

SfSignaturePad(
  onDrawStart: () {
    return false;
  },
  onDraw: (offset, time) {
    Offset offsetValue = offset;
    DateTime dateTime = time;
  },
  onDrawEnd: () {
     print("Signature has been completed in Signature Pad");
  });

• Call SfSignaturePadState.clear using state object to clear all the drawn strokes in the SfSignaturePad.

_signaturePadKey.currentState!.clear();

• Call SfSignaturePadState.toImage using state object to convert the signature to an image representation.

ui.Image image = await _signaturePadKey.currentState!.toImage();