How to add electronic signatures to PDFs in Flutter

This guide explains how to add an electronic signature (eSignature) to a PDF document in Flutter using Nutrient Flutter SDK, both programmatically and through the built-in user interface (UI).

Adding an electronic signature programmatically

In Nutrient Flutter SDK, electronic signatures are implemented as PDF annotations, commonly referred to as signature annotations.

Electronic signatures can be created using:

InkAnnotation with isSignature: true for drawn signatures.
ImageAnnotation with isSignature: true for image-based signatures.

Creating an ink signature

To create an ink signature annotation programmatically, use the following code snippet:

// Create points for the signature (this would typically come from user input).
  final InkLines lines = InkLines(
        points: [
          [
            [269.4, 343.4],
            [308.4, 341.7],
            [341.2, 339.6],
            [358.8, 339.6],
            [360.9, 339.2],
            [362.6, 338.8],
            [361.7, 337.1],
          ]
        ],
        intensities: [
          [1.0, 0.43, 0.64, 0.83, 0.98, 0.99, 0.97]
        ],
  ),
  // Create the ink annotation.
  final inkAnnotation = InkAnnotation(
    lines: lines,
    boundingBox: Rect.fromLTRB(100, 100, 300, 250),
    pageIndex: 0,
    color: Colors.blue,
    isSignature: true, // Mark as signature.
  );

  // Add the annotation to the document
  await pdfDocument.addAnnotation(inkAnnotation);

Creating an image signature

For signatures created outside the Nutrient UI or imported from images, you can use image annotations with the signature property:

// Create the image annotation with signature property.
  final imageAnnotation = ImageAnnotation(
    boundingBox: Rect.fromLTRB(100, 100, 300, 200),
    pageIndex: 0,
    attachment: imageAttachment,
    isSignature: true, // Mark as signature
  );

  // Add the annotation to the document.
  await pdfDocument.addAnnotation(imageAnnotation);

Licensing requirements for signature annotations

Creating, updating, and deleting signature annotations requires a license that includes either the Annotations component or the Electronic Signatures component. If your license includes only the Electronic Signatures component (without the Annotations component), modifications are restricted to signature annotations exclusively.

Using the built-in UI

If you’re using the SDK with Forms, end users can initiate the signature creation modal by tapping a signature form field within the document. If no signature form field is present, end users can manually add a signature using the signature tool button.

The signature tool is accessible within the annotation toolbar when the Annotations component is included in your license.

Signature creation configuration

You can customize the signature creation experience using the SignatureCreationConfiguration class:

PspdfkitWidget(
  documentPath: 'path/to/document.pdf',
  configuration: PdfConfiguration(
    enableAnnotationEditing: true,

    // Signature saving strategy.
    signatureSavingStrategy: SignatureSavingStrategy.saveIfSelected,

    // Signature creation configuration.
    signatureCreationConfiguration: SignatureCreationConfiguration(
      creationModes: [
        SignatureCreationMode.draw,  // Draw with finger or stylus.
        SignatureCreationMode.type,  // Type using fonts.
        SignatureCreationMode.image, // Import from image.
      ],
      colorOptions: SignatureColorOptions(
        option1: SignatureColorPreset(color: Colors.black),
        option2: SignatureColorPreset(color: Colors.blue),
        option3: SignatureColorPreset(color: Colors.red),
      ),
      // Platform-specific settings.
      androidSignatureOrientation: NutrientAndroidSignatureOrientation.landscape,
      iosSignatureAspectRatio: const AspectRatio(aspectRatio: 1.5),
    ),
  ),
);

When the signature creation modal view is displayed, end users can add a signature using one of three methods:

Draw — End users can create a handwritten signature using a touchscreen or stylus.
Attach an image — End users can attach an existing signature image from their device.
Type — End users can enter their signature as text using a chosen font style.

Creation modes

Control which signature creation methods are available:

SignatureCreationConfiguration(
  creationModes: [
    SignatureCreationMode.draw,  // Draw with finger or stylus.
    SignatureCreationMode.image, // Import from image.
    SignatureCreationMode.type,  // Type using fonts.
  ],
  // Other configuration options...
)

If not specified, all creation modes will be available.

Color options

By default, Nutrient provides three signature colors (typically black and shades of blue) to ensure a signature remains distinguishable from the document background.

You can customize the color options available for signatures:

SignatureCreationConfiguration(
  // Other configuration options...
  colorOptions: SignatureColorOptions(
    option1: SignatureColorPreset(color: Colors.black),
    option2: SignatureColorPreset(color: Colors.blue),
    option3: SignatureColorPreset(color: Colors.red),
  ),
)

Platform-specific settings

For iOS, control the aspect ratio of the signature area:

SignatureCreationConfiguration(
  // Other configuration options...
  iosSignatureAspectRatio: const AspectRatio(aspectRatio: 1.5), // 3:2 ratio
)

For Android, set the orientation of the signature area:

SignatureCreationConfiguration(
  // Other configuration options...
  androidSignatureOrientation: NutrientAndroidSignatureOrientation.landscape,
)

Platform-specific implementation details

For iOS, the Flutter SDK automatically sets up a PSPDFKeychainSignatureStore to handle signature storage in the iOS keychain.

For Android, the Flutter SDK configures a DatabaseSignatureStorage when a signature saving strategy is specified.