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.


This snippet shows how to use a SfSignaturePad.

final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
  minimumStrokeWidth: 3.0,
  maximumStrokeWidth: 6.0,
  backgroundColor: Colors.white,
  strokeColor: Colors.green,
  key: _signaturePadKey,
  onDrawStart: () {
    return false;
  onDraw: (offset, time) {
    Offset offsetValue = offset;
    DateTime dateTime = time;
  onDrawEnd: () {
     print("Signature has been completed in Signature Pad");
ui.Image image = await _signaturePadKey.currentState!.toImage();


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.


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


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


operator ==(Object other) bool
The equality operator.