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. You can add signatures programmatically or use the built-in user interface (UI).

Add an electronic signature programmatically

Nutrient Flutter SDK implements electronic signatures as PDF annotations, often called signature annotations.

Use one of these annotation types:

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

Add signature annotations through the document annotation manager(opens in a new tab) — controller.document.annotations — or through a headless document opened with Nutrient.openDocument().

Create an ink signature

Use an InkAnnotation when you want to create a drawn signature from points, such as strokes captured from user input.

// Create points for the signature (this would typically come from user input).
final 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(
  id: 'ink-signature-1',
  pageIndex: 0,
  bbox: [267.4, 335.1, 97.2, 10.3],
  createdAt: DateTime.now().toIso8601String(),
  lines: lines,
  lineWidth: 4,
  isDrawnNaturally: false,
  strokeColor: Colors.blue,
  isSignature: true, // Mark as signature.
);

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

Create an image signature

Use an ImageAnnotation when you want to add a signature created outside the Nutrient UI or imported from an image:

// Create the image annotation with signature property.
final imageAnnotation = ImageAnnotation(
  id: 'image-signature-1',
  pageIndex: 0,
  bbox: [100, 100, 200, 100],
  createdAt: DateTime.now().toIso8601String(),
  contentType: 'image/png',
  imageAttachmentId: 'image-signature-1',
  attachment: AnnotationAttachment(
    id: 'image-signature-1',
    binary: base64ImageData, // Base64-encoded image data.
    contentType: 'image/png',
  ),
  isSignature: true, // Mark as signature.
);

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

Meet signature annotation licensing requirements

Creating, updating, and deleting signature annotations requires a license that includes the Annotations component or the Electronic Signatures component. If your license includes only the Electronic Signatures component and not the Annotations component, you can only modify signature annotations.

Use the built-in UI

For details about using the SDK with form fields, refer to the forms guide. End users can open the signature creation modal by tapping a signature form field in the document. If the document doesn’t include a signature form field, end users can add a signature with the signature tool button.

The annotation toolbar shows the signature tool when your license includes the Annotations component.

Configure signature creation

Use the [SignatureCreationConfiguration][] class on [NutrientViewConfiguration][] to customize how end users create signatures.

NutrientDocumentView(
  documentPath: 'path/to/document.pdf',
  configuration: NutrientViewConfiguration(
    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, id: 'black'),
        option2: SignatureColorPreset(color: Colors.blue, id: 'blue'),
        option3: SignatureColorPreset(color: Colors.red, id: 'red'),
      ),
      // Fonts offered on the "type" tab (iOS and Web).
      fonts: ['Zapfino', 'Noteworthy'],
      // Platform-specific settings.
      androidSignatureOrientation: NutrientAndroidSignatureOrientation.landscape,
      iosSignatureAspectRatio: const AspectRatio(aspectRatio: 1.5),
    ),
  ),
)

The viewer reads signatureSavingStrategy and signatureCreationConfiguration when it starts. Rebuild the view with a new configuration to change these values at runtime.

Choose signature creation methods

When the signature creation modal appears, end users can add a signature in one of three ways:

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

Set creation modes

Use creationModes to control which signature creation methods end users can use.

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

If you don’t specify creationModes, Nutrient enables all creation modes.

Set color options

Nutrient provides three signature colors by default — typically black and shades of blue — so the signature remains distinguishable from the document background.

You can customize the colors available for signatures. Each preset uses a SignatureColorPreset with a Flutter Color and optional localization for its accessibility label.

SignatureCreationConfiguration(
  // Other configuration options...
  colorOptions: SignatureColorOptions(
    option1: SignatureColorPreset(
      color: Colors.black,
      id: 'black',               // Stable identifier.
      defaultMessage: 'Black',   // Human-readable label.
    ),
    option2: SignatureColorPreset(color: Colors.blue, id: 'blue'),
    option3: SignatureColorPreset(color: Colors.red, id: 'red'),
  ),
)

Set fonts

Use fonts to customize the font families for typed signatures on iOS and Web:

SignatureCreationConfiguration(
  // Other configuration options...
  fonts: ['Zapfino', 'Noteworthy'],
)

On Web, fonts must name families available to the page. Declare custom faces with a CSS @font-face rule so the family name resolves. Android has no native API for this option, so Nutrient ignores it there.

Set platform-specific options

Use platform-specific options to control the signature area on iOS and Android.

For iOS, set the signature area aspect ratio:

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

For Android, set the signature area orientation:

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

Platform support

The following table shows which platforms support each signature configuration option.

Nutrient ignores unsupported options, so you can reuse one cross-platform SignatureCreationConfiguration.

Understand platform-specific implementation details

On iOS, Nutrient installs a keychain-backed signature store (PSPDFKeychainSignatureStore) only when the saving strategy is alwaysSave or saveIfSelected. This setup persists saved signatures.

On Android, Nutrient configures a DatabaseSignatureStorage when you specify a signature saving strategy.

For a complete runnable example, refer to custom_configuration_example in the Catalog app. The example toggles the saving strategy and a custom creation UI live.