flutter_signature 1.0.0

A customizable signature pad widget for Flutter with support for PNG, JPG, and PDF export formats. Features configurable dimensions, stroke customization, undo/clear operations, and cross-platform com [...]

Flutter Signature

A comprehensive Flutter package for signature capture and export with support for multiple formats (PNG, JPG, PDF) and customizable dimensions.

Features

• Signature Pad Widget: Smooth signature drawing with customizable styling
• Multiple Export Formats: Save signatures as PNG, JPG, or PDF
• Customizable Dimensions: Set custom width and height for signature pad
• Stroke Customization: Configurable stroke color, width, and background
• Easy Integration: Simple controller-based API
• File Management: Built-in utilities for saving to device storage
• Undo/Clear Operations: Full signature editing capabilities

Getting Started

Add this package to your pubspec.yaml:

dependencies:
  flutter_signature: ^1.0.0

Then run:

flutter pub get

Basic Usage

1. Import the package

import 'package:flutter_signature/flutter_signature.dart';

2. Create a controller

final SignatureController controller = SignatureController();

3. Add the signature pad to your widget tree

SignaturePad(
  controller: controller,
  width: 300,
  height: 200,
  backgroundColor: Colors.white,
)

4. Export the signature

// Save as PNG
final pngPath = await SignatureUtils.saveSignature(
  controller: controller,
  format: SignatureExportFormat.png,
  width: 300,
  height: 200,
);

// Save as PDF
final pdfPath = await SignatureUtils.saveSignature(
  controller: controller,
  format: SignatureExportFormat.pdf,
  width: 300,
  height: 200,
);

Complete Example

import 'package:flutter/material.dart';
import 'package:flutter_signature/flutter_signature.dart';

class SignatureScreen extends StatefulWidget {
  @override
  _SignatureScreenState createState() => _SignatureScreenState();
}

class _SignatureScreenState extends State<SignatureScreen> {
  late SignatureController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SignatureController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Signature')),
      body: Column(
        children: [
          // Signature Pad
          SignaturePad(
            controller: _controller,
            width: 350,
            height: 200,
            backgroundColor: Colors.grey[50]!,
            onSignatureChange: () {
              setState(() {}); // Update UI when signature changes
            },
          ),
          
          SizedBox(height: 20),
          
          // Control Buttons
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: _controller.isNotEmpty ? _controller.clear : null,
                child: Text('Clear'),
              ),
              ElevatedButton(
                onPressed: _controller.isNotEmpty ? _controller.undo : null,
                child: Text('Undo'),
              ),
              ElevatedButton(
                onPressed: _controller.isNotEmpty ? _savePNG : null,
                child: Text('Save PNG'),
              ),
              ElevatedButton(
                onPressed: _controller.isNotEmpty ? _savePDF : null,
                child: Text('Save PDF'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Future<void> _savePNG() async {
    final path = await SignatureUtils.saveSignature(
      controller: _controller,
      format: SignatureExportFormat.png,
      width: 350,
      height: 200,
    );
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Signature saved to: $path')),
    );
  }

  Future<void> _savePDF() async {
    final path = await SignatureUtils.saveSignature(
      controller: _controller,
      format: SignatureExportFormat.pdf,
      width: 350,
      height: 200,
    );
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('PDF saved to: $path')),
    );
  }
}

API Reference

SignaturePad

The main widget for capturing signatures.

Properties

• controller (required): SignatureController for managing state
• width: Width of the signature pad
• height: Height of the signature pad
• backgroundColor: Background color (default: Colors.white)
• decoration: Custom BoxDecoration for styling
• onSignatureStart: Callback when signature drawing starts
• onSignatureChange: Callback when signature changes
• onSignatureEnd: Callback when signature drawing ends

SignatureController

Controller for managing signature state and operations.

Methods

• setStrokeColor(Color color): Set stroke color
• setStrokeWidth(double width): Set stroke width
• setBackgroundColor(Color color): Set background color
• clear(): Clear all strokes
• undo(): Remove last stroke
• toPngBytes(): Get PNG bytes
• toJpgBytes(): Get JPG bytes
• toPdfBytes(): Get PDF bytes

Properties

• isEmpty: Check if signature is empty
• isNotEmpty: Check if signature has content
• strokeColor: Current stroke color
• strokeWidth: Current stroke width
• backgroundColor: Current background color

SignatureUtils

Utility class for signature operations.

Methods

• saveSignature(): Save signature to device storage
• getSignatureBytes(): Get signature bytes in specified format
• isValidDimensions(): Validate signature dimensions
• getSuggestedFileName(): Get suggested filename with timestamp

SignatureExportFormat

Enum for export format options.

Values

• png: PNG format (lossless, supports transparency)
• jpg: JPEG format (lossy compression, smaller size)
• pdf: PDF format (vector-based, scalable)

Customization

Stroke Customization

controller.setStrokeColor(Colors.blue);
controller.setStrokeWidth(3.0);

Background Customization

controller.setBackgroundColor(Colors.grey[100]!);

Custom Styling

SignaturePad(
  controller: controller,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 2),
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 5,
      ),
    ],
  ),
)

Export Options

Save to Custom Directory

final customPath = await SignatureUtils.saveSignature(
  controller: controller,
  format: SignatureExportFormat.png,
  width: 300,
  height: 200,
  directoryPath: '/custom/path',
  fileName: 'my_signature.png',
);

Get Bytes for Network Upload

final bytes = await SignatureUtils.getSignatureBytes(
  controller: controller,
  format: SignatureExportFormat.png,
  width: 300,
  height: 200,
);

// Upload bytes to server
await uploadToServer(bytes);

Platform Support

• ✅ Android
• ✅ iOS
• ✅ Web
• ✅ Windows
• ✅ macOS
• ✅ Linux

Requirements

• Flutter SDK: >=3.0.0
• Dart SDK: >=3.0.0

Dependencies

• pdf: For PDF generation
• path_provider: For file system access

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Changelog

1.0.0

• Initial release
• Signature pad widget with customizable dimensions
• Export to PNG, JPG, and PDF formats
• Stroke and background customization
• Undo/clear functionality
• File saving utilities