---
title: "Add electronic signatures to PDFs in Flutter | Nutrient Flutter SDK"
canonical_url: "https://www.nutrient.io/guides/flutter/signatures/adding-an-electronic-signature/"
md_url: "https://www.nutrient.io/guides/flutter/signatures/adding-an-electronic-signature.md"
last_updated: "2026-05-15T09:08:03.628Z"
description: "Learn how to add electronic signatures to PDFs in Flutter using Nutrient Flutter SDK. Enable end users to sign documents by drawing, typing, or attaching an image. Follow our step-by-step guide for seamless eSignature integration."
---

# How to add electronic signatures to PDFs in Flutter

This guide explains how to add an [electronic signature (eSignature)](https://www.nutrient.io/sdk/solutions/signing/) 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](https://www.nutrient.io/guides/flutter/annotations.md), 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:

```dart

  // 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:

```dart

  // 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](https://www.nutrient.io/guides/flutter/forms.md)**, 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:

```dart

NutrientView(
  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),
    ),
  ),
);

```

### Signature creation modal view

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:

```dart

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:

```dart

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:

```dart

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

```

For Android, set the orientation of the signature area:

```dart

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.
---

## Related pages

- [Fill and sign PDF forms in Flutter](/guides/flutter/signatures/fill-and-sign-forms.md)
- [Digital signatures in Flutter](/guides/flutter/signatures/digital-signatures.md)
- [How to save and store electronic signatures in Flutter](/guides/flutter/signatures/signature-storage.md)
- [Understanding electronic and digital signatures](/guides/flutter/signatures.md)