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();

Inheritance

Constructors

SfSignaturePad({Key? key, double minimumStrokeWidth = _kMinimumStrokeWidth, double maximumStrokeWidth = _kMaximumStrokeWidth, Color? backgroundColor, Color? strokeColor, SignatureOnDrawStartCallback? onDrawStart, SignatureDrawCallback? onDraw, VoidCallback? onDrawEnd}): Constructor that creates a new instance of SfSignaturePad.
const

Properties

backgroundColor → Color?: Color applied to the background of SfSignaturePad.
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
maximumStrokeWidth → double: The maximum width of the signature stroke.
final
minimumStrokeWidth → double: The minimum width of the signature stroke.
final
onDraw → SignatureDrawCallback?: Called when a stroke is updated on the SfSignaturePad.
final
onDrawEnd → VoidCallback?: Called when the user completes signing on SfSignaturePad.
final
onDrawStart → SignatureOnDrawStartCallback?: Called when the user starts signing on SfSignaturePad.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
strokeColor → Color?: Color applied to the signature stroke.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → SfSignaturePadState: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited