Signature Widget

The Signature widget allows users to capture handwritten signatures directly within your application. It provides a canvas where users can draw their signature using touch or mouse input. The widget is highly customizable, enabling you to adjust its appearance and behavior to suit your application's needs.

Key Properties and Features

Pen Customization: Adjust the pen color (penColor), stroke width (penStrokeWidth), stroke cap (strokeCap), and stroke join (strokeJoin) to customize the drawing experience.
Background Customization: Set the background color of the signature pad using backgroundColor.
Value Handling: The value property holds the signature data encoded as a Base64 string. This can be used to retrieve or set the signature.
Disabling Input: Use the disabled property to prevent users from drawing on the signature pad, useful for displaying a previously captured signature.
Export Options: Customize the colors used when exporting the signature image with exportBackgroundColor and exportPenColor.
Getters: Access additional data through getters like isEmpty, getSignatureBytes, getSignatureSVG, and getSignatureJPG.
Events: The onChange event is triggered whenever the signature pad's content changes, allowing you to react to user input.
Methods: The clear() method allows you to programmatically clear the signature pad.

Open in Studio

Explanation of Examples

Basic Signature Pad: Demonstrates a simple signature pad with customized pen color and stroke width. An onChange event is defined to execute code whenever the signature changes.
Signature Pad with Clear Button and Export: Includes a signature pad with buttons to clear the signature and to save/export the signature data. The clear() method resets the pad. The value property retrieves the Base64-encoded signature data for storage or processing.

Properties

Property	Type	Description
id	string	Unique identifier for the widget.
value	string	The current value of the signature, encoded as a Base64 string. Can be used to retrieve or set the signature.
disabled	boolean	If `true`, the signature pad is disabled and the user cannot draw. Default is `false`.

Events

Event	Description
onChange	Triggered whenever the signature pad's content changes. Use this event to execute actions or code in response to user input.

Methods

Method	Description
clear()	Clears the signature pad programmatically.

Getters

These properties can be accessed to retrieve additional information or data from the signature widget.

Getter	Type	Description
isEmpty	boolean	Returns `true` if the signature pad is empty, `false` otherwise.
value	string	Retrieves the current signature data as a Base64-encoded string.
getSignatureBytes	Uint8List	Retrieves the signature data as raw bytes (PNG format).
getSignatureSVG	SvgPicture	Retrieves the signature as an SVG image.
getSignatureJPG	ui.Image	Retrieves the signature as a `ui.Image` (for advanced use cases).

Styles

Dimension and Positioning

Property	Type	Description
width	integer	The width of the signature pad. Can be a number (pixels) or a percentage string (e.g., `"100%"`).
height	integer	The height of the signature pad. Can be a number (pixels) or a percentage string (e.g., `"100%"`).
margin	integer	The margin around the signature pad. Supports shorthand notation like `"10 5 10"`.
padding	integer	The padding inside the signature pad. Supports shorthand notation like `"10 5 10"`.
alignment	string	Alignment of the widget within its parent. Possible values: `"left"`, `"right"`, `"center"`, `"top"`, `"bottom"`, `"stretch"`.

Appearance

Property	Type	Description
penColor	Color	The color of the pen used for drawing the signature. Accepts color names, hex codes, or RGB values. Default is `"black"`.
penStrokeWidth	number	The stroke width of the pen used for drawing the signature. Must be a positive number. Default is `3.0`.
backgroundColor	Color	The background color of the signature pad. Accepts color names, hex codes, or RGB values. Default is `"#CCCCCC"`.
strokeCap	string	The stroke cap style for the pen. Determines how the ends of lines are drawn. Possible values are `"butt"`, `"round"`, `"square"`. Default is `"butt"`.
strokeJoin	string	The stroke join style for the pen. Determines how two connecting lines are joined. Possible values are `"miter"`, `"round"`, `"bevel"`. Default is `"miter"`.
exportBackgroundColor	Color	The background color used when exporting the signature image. If not specified, defaults to the `backgroundColor`.
exportPenColor	Color	The pen color used when exporting the signature image. If not specified, defaults to the `penColor`.
boxShadow	object	The box shadow styling for the signature pad. See BoxShadow properties below.
clipContent	boolean	If `true`, clips the content inside the signature pad. Default is `false`.
visible	boolean	Controls the visibility of the widget. Default is `true`.
elevation	integer	The elevation (shadow depth) of the widget. Accepts values from `0` to `24`.
elevationShadowColor	Color	The color of the elevation shadow. Accepts color names, hex codes, or RGB values.
elevationBorderRadius	integer	The border radius for the elevation shadow.

BoxShadow

Property	Type	Description
color	Color	The color of the shadow. Accepts color names, hex codes, or RGB values.
offsetX	integer	The horizontal offset of the shadow.
offsetY	integer	The vertical offset of the shadow.
blurRadius	integer	The blur radius of the shadow.
spreadRadius	integer	The spread radius of the shadow.

Box Styles (Inherited)

This widget also inherits these styles:

Property	Type	Description
margin	integer/string	Margin with CSS-style notation (1 to 4 integers) e.g. margin: 5 20 5
padding	integer/string	Padding with CSS-style notation (1 to 4 integers) e.g. padding: 5 20 5
backgroundColor	Color	The background color of this widget.
backgroundImage	BackgroundImage	The background image of this widget.
backgroundGradient	Gradient	The background gradient of this widget.
border	Border	The border of this widget.
shadow	Shadow	The shadow of this widget
clipContent	boolean	Some widgets (such as Image) may bleed through the container when borderRadius is set. Use this to apply a clipping to ensure this does not happen.
width	integer	The width of this widget.
height	integer	The height of this widget.
borderRadius	string or integer	The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0.
borderColor	integer or string	Sets the border color, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange.
borderWidth	integer	Thickness of the border. Minimum value should be 0.
shadowColor	integer or string	Sets the box shadow color starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange.
shadowOffset	array	The values in the array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position.
shadowRadius	string or integer	The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0.
shadowStyle	string	The blur style to apply on the shadow: normal, solid, outer, inner.

Base Styles (Inherited)

This widget also inherits these base styles:

Property	Type	Description
visible	boolean	Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified.
visibilityTransitionDuration	number	Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible.
elevation	integer	The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. (Minimum: 0, Maximum: 24)
elevationShadowColor	Color	The shadow color for the elevation.
elevationBorderRadius	integer / string	If the widget has a borderRadius, this should be changed to have the same value. Use with CSS-like notation (1 to 4 integers).
alignment	Alignment	Align this widget relative to its parent.
stackPositionTop	integer	The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children.
stackPositionBottom	integer	The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children.
stackPositionLeft	integer	The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children.
stackPositionRight	integer	The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children.
captureWebPointer	boolean	Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g., Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget.

Shape Slidable