SfSignaturePad class Null safety

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.

final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
SfSignaturePad(
  minimumStrokeWidth: 3.0,
  maximumStrokeWidth: 6.0,
  backgroundColor: Colors.white,
  strokeColor: Colors.green,
  key: _signaturePadKey,
 );
SfSignaturePad(
  onDrawStart: () {
    return false;
  },
  onDraw: (offset, time) {
    Offset offsetValue = offset;
    DateTime dateTime = time;
  },
  onDrawEnd: () {
     print("Signature has been completed in Signature Pad");
  });
_signaturePadKey.currentState!.clear();
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.
@nonVirtual, read-only, inherited
key Key?
Controls how one widget replaces another widget in the tree.
final, inherited
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.
read-only, inherited
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.
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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.
@nonVirtual, inherited