kayiv_signature_pad 1.0.1

A high-precision signature pad widget for Flutter, offering smooth rendering, pressure sensitivity, undo/redo, and advanced customization with export capabilities.

Kayiv Signature Pad

A high-precision signature pad widget for Flutter, offering smooth rendering, pressure sensitivity, undo/redo, and advanced customization with export capabilities.

Features

• ✨ Smooth signature drawing with Cubic Bézier curves
• 📱 Pressure sensitivity for stylus-supported devices
• 🔄 Undo and redo strokes
• 📤 Export to PNG or SVG formats
• 💾 Save and load signatures
• 📝 Form field integration
• 🎨 Customizable pen types (ballpoint, fountain, brush)
• 🖊️ Touch and pressure sensitivity controls
• 🎯 Drawing boundaries and constraints
• ♿ Accessibility support
• 🌐 Cross-platform (iOS, Android, web)

Installation

Add to your pubspec.yaml:

dependencies:
  kayiv_signature_pad: ^1.0.0

Run flutter pub get.

Usage

Create a Controller:

final controller = SignatureController(
  penColor: Colors.blue,
  minStrokeWidth: 1.0,
  maxStrokeWidth: 5.0,
  smoothRatio: 0.65,
  penType: PenType.brush,
  enableTouchSensitivity: true,
  enablePressure: true,
  onDrawStart: () => print('Drawing started'),
  onDrawEnd: () => print('Drawing ended'),
);

Add SignatureFormField Widget:

SignatureFormField(
  controller: controller,
  backgroundColor: Colors.grey[200]!,
  width: 300,
  height: 200,
  validator: (value) => controller.isEmpty ? 'Signature required' : null,
)

Use in a Form:

Form(
  key: _formKey,
  child: SignatureFormField(
    controller: controller,
    validator: (value) => controller.isEmpty ? 'Signature required' : null,
  ),
)

Control the Signature:

// Basic controls
controller.clear()           // Clear all strokes
controller.undo()            // Remove last stroke
controller.redo()            // Re-add last undone stroke

// Export options
await controller.toPngBytes() // Export as PNG bytes
await controller.toSvg()      // Export as SVG string

// Pen customization
controller.setPenColor(Colors.red)           // Change pen color
controller.setPenSize(2.0, 8.0)             // Set min/max stroke width
controller.setPenType(PenType.fountain)     // Change pen type
controller.setTouchSensitivity(true)        // Enable/disable touch sensitivity
controller.setPressure(true)                // Enable/disable pressure sensitivity

Example

Scaffold(
  body: Column(
    children: [
      SignatureFormField(
        controller: controller,
        validator: (value) => controller.isEmpty ? 'Signature required' : null,
      ),
      Row(
        children: [
          ElevatedButton(onPressed: controller.undo, child: Text('Undo')),
          ElevatedButton(onPressed: controller.redo, child: Text('Redo')),
          ElevatedButton(onPressed: controller.clear, child: Text('Clear')),
          ElevatedButton(
            onPressed: () async {
              final bytes = await controller.toPngBytes();
              // Handle PNG export
            },
            child: Text('Export PNG'),
          ),
        ],
      ),
    ],
  ),
)

API

SignatureController

Properties:

• penColor: Pen color (default: Colors.black)
• minStrokeWidth: Minimum stroke width (default: 1.0)
• maxStrokeWidth: Maximum stroke width (default: 5.0)
• smoothRatio: Curve smoothness (0.0-1.0, default: 0.65)
• penType: Pen style (ballpoint, fountain, brush)
• enableTouchSensitivity: Enable touch sensitivity (default: true)
• enablePressure: Enable pressure sensitivity (default: true)
• onDrawStart: Callback when drawing starts
• onDrawEnd: Callback when drawing ends
• isEmpty: Checks if canvas is empty

Methods:

• clear(): Clears all strokes
• undo(): Removes last stroke
• redo(): Re-adds last undone stroke
• toPngBytes(): Returns PNG bytes
• toSvg(): Returns SVG string
• setPenColor(Color color): Change pen color
• setPenSize(double min, double max): Set stroke width range
• setPenType(PenType type): Change pen type
• setTouchSensitivity(bool enabled): Enable/disable touch sensitivity
• setPressure(bool enabled): Enable/disable pressure sensitivity

SignatureFormField

Properties:

• controller: Required SignatureController
• backgroundColor: Background color (default: Colors.white)
• width: Widget width (default: 300)
• height: Widget height (default: 200)
• onSaved: Form save callback
• validator: Form validation callback
• semanticLabel: Accessibility label (default: 'Signature Pad')

License

MIT License