syncfusion-flutter-signature-pad

# Syncfusion Flutter Signature Pad This skill covers the Syncfusion Flutter **SfSignaturePad** component, which provides an elegant and intuitive way to capture handwritten signatures or drawings in your Flutter applications. The component offers smooth drawing experience with touch and stylus support, along with powerful customization and export capabilities. ## When to Use This Skill Use this skill when you need to: - **Capture digital signatures** for documents, forms, or agreements - **Implement e-signature functionality** in approval workflows - **Create signature fields** in PDF forms or digital documents - **Build document signing interfaces** for contracts, receipts, or legal forms - **Add handwritten input** for notes, sketches, or annotations - **Implement signature verification** screens in authentication flows - **Create drawing surfaces** for simple sketching or markup - **Capture user consent** with signature-based authentication - **Build approval systems** that require handwritten signatures - **Add signature pads** to registration, checkout, or delivery confirmation screens ## Component Overview **SfSignaturePad** is a Flutter widget that captures smooth, high-quality signatures or drawings through touch or stylus input. It provides a customizable drawing surface with features like stroke customization, background images, minimum stroke validation, and multiple export formats. ### Key Features - **Smooth Drawing Experience** - Optimized for touch and stylus input with smooth curves - **Stroke Customization** - Control stroke color, width, and appearance - **Background Support** - Add background colors or images - **Minimum Stroke Validation** - Ensure meaningful signatures are captured - **Multiple Export Formats** - Convert to image (PNG, JPEG) or save as raw data - **Clear & Reset** - Programmatically clear the signature pad - **Read-only Mode** - Display signatures without allowing modifications - **Callbacks** - Handle draw start, draw, and draw end events - **Transparent Background** - Support for transparent signature capture - **High-Quality Output** - Export signatures at desired resolution ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and package setup - Basic SfSignaturePad implementation - Package dependencies and imports - First signature capture example - Quick setup guide ### Component Overview 📄 **Read:** [references/overview.md](references/overview.md) - SfSignaturePad widget overview and features - When to use SignaturePad - Core capabilities and use cases - Widget architecture - Basic configuration ### Customization and Styling 📄 **Read:** [references/customization.md](references/customization.md) - Stroke color customization - Stroke width and min/max settings - Background color and images - Border and container styling - Transparent backgrounds - Visual appearance customization - Theme integration ### Saving and Exporting 📄 **Read:** [references/saving-exporting.md](references/saving-exporting.md) - Converting signature to image (toImage method) - Image format options (PNG, JPEG) - Resolution and quality settings - Saving signatures to storage - Converting to Uint8List - Clearing the signature pad - Minimum stroke count validation - Export patterns and best practices ### Event Handling 📄 **Read:** [references/callbacks.md](references/callbacks.md) - onDrawStart callback - onDraw callback - onDrawEnd callback - Handling signature events - Validation during drawing - Real-time feedback patterns - Event argument types ### Advanced Features 📄 **Read:** [references/advanced-features.md](references/advanced-features.md) - Read-only mode for displaying signatures - Background image support - Signature validation techniques - Custom drawing constraints - Integration with forms - Signature comparison - Multi-signature workflows - Undo/redo implementation patterns ### Accessibility 📄 **Read:** [references/accessibility.md](references/accessibility.md) - Screen reader support - Semantic labels for signature fields - Keyboard accessibility considerations - Alternative input methods - WCAG compliance - Accessible signature workflows ## Quick Start Examples ### Basic Signature Pad ```dart import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_signaturepad/signaturepad.dart'; class BasicSignaturePad extends StatelessWidget { final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Sign Here')), body: Column( children: [ Padding( padding: EdgeInsets.all(16), child: Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey), ), child: SfSignaturePad( key: _signaturePadKey, backgroundColor: Colors.white, ), ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ElevatedButton( onPressed: () => _signaturePadKey.currentState!.clear(), child: Text('Clear'), ), ElevatedButton( onPressed: _saveSignature, child: Text('Save'), ), ], ), ], ), ); } Future<void> _saveSignature() async { final image = await _signaturePadKey.currentState!.toImage(); // Process the image (save to file, upload, etc.) } } ``` ### Customized Signature Pad ```dart import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_signaturepad/signaturepad.dart'; class CustomSignaturePad extends StatelessWidget { final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey(); @override Widget build(BuildContext context) { return SfSignaturePad( key: _signaturePadKey, backgroundColor: Colors.grey[100], strokeColor: Colors.blue, minimumStrokeWidth: 1.0, maximumStrokeWidth: 4.0, onDrawStart: () { print('Started drawing'); return true; }, onDraw: (offset, time) { print('Drawing at: $offset'); }, onDrawEnd: () { print('Finished drawing'); }, ); } } ``` ### Signature Pad with Validation ```dart import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_signaturepad/signaturepad.dart'; import 'dart:ui' as ui; class ValidatedSignaturePad extends StatefulWidget { @override _ValidatedSignaturePadState createState() => _ValidatedSignaturePadState(); } class _ValidatedSignaturePadState extends State<ValidatedSignaturePad> { final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey(); String _validationMessage = ''; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Sign Document')), body: Column( children: [ Expanded( child: Padding( padding: EdgeInsets.all(16), child: Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey, width: 2), borderRadius: BorderRadius.circular(8), ), child: SfSignaturePad( key: _signaturePadKey, backgroundColor: Colors.white, strokeColor: Colors.black, minimumStrokeWidth: 2.0, maximumStrokeWidth: 4.0, ), ), ), ), if (_validationMessage.isNotEmpty) Padding( padding: EdgeInsets.all(8), child: Text( _validationMessage, style: TextStyle(color: Colors.red), ), ), Padding( padding: EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ OutlinedButton( onPressed: _clearSignature, child: Text('Clear'), ), ElevatedButton( onPressed: _saveSignature, child: Text('Save Signature'), ), ], ), ), ], ), ); } void _clearSignature() { setState(() { _signaturePadKey.currentState!.clear(); _validationMessage = ''; }); } Future<void> _saveSignature() async { // Validate minimum stroke count if (_signaturePadKey.currentState!.toImage == null) { setState(() { _validationMessage = 'Please provide a signature'; }); return; } try { final ui.Image image = await _signaturePadKey.currentState!.toImage( pixelRatio: 3.0, ); // Convert to bytes final byteData = await image.toByteData(format: ui.ImageByteFormat.png); final bytes = byteData!.buffer.asUint8List(); // Save or upload the signature print('Signature saved: ${bytes.length} bytes'); setState(() { _validationMessage = 'Signature saved successfully!'; }); // Navigate or perform next action } catch (e) { setState(() { _validationMessage = 'Error saving signature: $e'; }); } } } ``` ### Signature Pad with Background Image ```dart import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_signaturepad/signaturepad.dart'; class SignatureWithBackground extends StatelessWidget { final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey(); @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey), image: DecorationImage( image: AssetImage('assets/signature_background.png'), fit: BoxFit.cover, opacity: 0.3, ), ), child: SfSignaturePad( key: _signaturePadKey, backgroundColor: Colors.transparent, strokeColor: Colors.blue[900]!, minimumStrokeWidth: 2.0, maximumStrokeWidth: 5.0, ), ); } } ``` ## Common Patterns ### Pattern 1: Document Signing Flow ```dart class DocumentSigningFlow extends StatefulWidget { @override _DocumentSigningFlowState createState() => _DocumentSigningFlowState(); } class _DocumentSigningFlowState extends State<DocumentSigningFlow> { final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey(); bool _hasSignature = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Sign Agreement')), body: Column( children: [ // Document preview Expanded( flex: 2, child: Container( padding: EdgeInsets.all(16), child: Text('Agreement Terms...'), ), ), // Signature section Padding( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Your Signature', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), ), SizedBox(height: 8), Container( height: 200, decoration: BoxDecoration( border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(8), ), child: SfSignaturePad( key: _signaturePadKey, backgroundColor: Colors.white, strokeColor: Colors.black, minimumStrokeWidth: 2.0, maximumStrokeWidth: 4.0, onDrawEnd: () { setState(() => _hasSignature = true); }, ), ), ], ), ), // Action buttons Padding( padding: EdgeInsets.all(16), child: Row( children: [ Expanded( child: OutlinedButton( onPressed: _clearSignature, child: Text('Clear'), ), ), SizedBox(width: 16), Expanded( child: ElevatedButton( onPressed: _hasSignature ? _submitSignature : null, child: Text('Submit'), ), ), ], ), ), ], ), ); } void _clearSignature() { setState(() { _signaturePadKey.currentState!.clear(); _hasSignature = false; }); } Future<void> _submitSignature() async { final image = await _signaturePadKey.currentState!.toImage(pixelRatio: 3.0); // Submit signature with document Navigator.pop(context, image); } } ``` ### Pattern 2: Multiple Signatures Collection ```dart class MultipleSignaturesForm extends StatefulWidget { @override _MultipleSignaturesFormState createState() => _MultipleSignaturesFormState(); } class _MultipleSignaturesFormState extends State<MultipleSignaturesForm> { final GlobalKey<SfSignaturePadState> _applicantKey = GlobalKey(); final GlobalKey<SfSignaturePadState> _witnessKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Signatures Required')), body: SingleChildScrollView( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildSignatureField( 'Applicant Signature', _applicantKey, ), SizedBox(height: 24), _buildSignatureField( 'Witness Signature', _witnessKey, ), SizedBox(height: 24), ElevatedButton( onPressed: _submitAllSignatures, child: Text('Submit All'), ), ], ), ), ); } Widget _buildSignatureField(String label, GlobalKey<SfSignaturePadState> key) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(label, style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)), SizedBox(height: 8), Container( height: 150, decoration: BoxDecoration( border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(8), ), child: SfSignaturePad( key: key, backgroundColor: Colors.white, strokeColor: Colors.blue[900]!, ), ), TextButton( onPressed: () => key.currentState!.clear(), child: Text('Clear'), ),