How to check if signature is not empty

[Rozwój BETASI]

Hi,

how can I check if SfSignaturePad contains a signature and not just a dot?

Thanks

[Praveen Balu]

Hi Rozwój BETASI,

To check whether the SfSignaturePad contains a signature, you can use the toPathList() method, which returns the list of paths drawn on the pad. This method is available through the state object, so you’ll need to assign GlobalKey to the SfSignaturePad to access it. If the returned path list is not empty, it means something has been drawn.

However, please note that the widget does not currently support checking whether the signature is valid (e.g., a small dot).

Code snippet:

final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();

 

 // To check if signature pad has content

 bool checkSignatureContent() {

   List<Path> paths = signatureGlobalKey.currentState!.toPathList();

 

   if (paths.isEmpty) {

     // signature is not available

     return false;

   } else {

     // signature is available

     return true;

   }

 }

Adding key to the signature pad widget:

SfSignaturePad(

  key: signatureGlobalKey,

  backgroundColor: Colors.grey[200],

),

For more details, you can refer to our user guide here:

Getting started with Flutter Signature Pad widget | Syncfusion

Regards,
Praveen balu.

[Lauren James]

Helpful. Thanks so much
duck life

[Praveen Balu]

Hi Lauren James,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Praveen Balu.

[Charlotten]

@crossy road In the context of checking if the SfSignaturePad contains a valid signature, how can I differentiate between a valid signature and just a small dot?

[Harsha Midadhala Khajareddy Midadhala]

Hi Charlotten,

Currently, the SfSignaturePad does not include a built-in feature to distinguish between a valid signature and a minimal mark such as a small dot. The control only tracks the strokes drawn by the user.

 

To implement this validation, you can retrieve the drawn paths using the toPathList() method with a GlobalKey and apply custom logic to determine whether the signature meets your criteria. For example, you might check the total length of the strokes, the bounding box size, or the number of points in the path.

 

Here’s a simple example to check if any stroke exists:

 

final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey<SfSignaturePadState>();

 

bool _hasAnyStroke() {

  final paths = signatureGlobalKey.currentState?.toPathList() ?? const <ui.Path>[];

  return paths.isNotEmpty;

}

if (!_hasAnyStroke()) {

  _showSnack('Please provide a signature before saving.');

  return;

}

 

To go further, you could calculate the bounding rectangle of all paths and ensure it exceeds a minimum size, which helps differentiate a valid signature from a small dot.

 

Please feel free to reach out if you need any further assistance.

 

Regards,

Harsha.