Sign PDF with Flutter

This guide will assist you in integrating DocuSeal document e-signing capabilities into your Flutter app. With DocuSeal, you can create document templates from your PDF files, send them to the signers, and receive signed copies. Templates can be created either using our web UI or through the API. For instance, you can design a document template with various field types using HTML and CSS or PDF upload. More information on this can be found in our guides.

How to sign PDFs with Flutter

  • Create a DocuSeal account DocuSeal account.
  • Create a document template using web UI or API.
  • Embed a signing form in your app.

Embedded Signing Form

To embed a signing form in your Flutter app, you need to use a WebView. The WebView will load the script, and the user can sign the document using the DocuSeal Signing Form. Therefore, you first need to add dependencies to your project's pubspec.yaml file.

To do this, open the pubspec.yaml file in the app folder of your project and add the following code to the dependencies block: 

webview_flutter: ^4.10.0

Now you need to allow your app to use the internet. To do this, open the AndroidManifest.xml file in the app/src/main folder and add the following code: 

<uses-permission android:name="android.permission.INTERNET"/>

This is all you need to create the layout. Below is the code that you can use as an example to add a signing form to your app: 

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

void main() {
  runApp(const DocuSealDemoApp());
}

class DocuSealDemoApp extends StatelessWidget {
  const DocuSealDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DocuSeal Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const WebviewPage(),
    );
  }
}

class WebviewPage extends StatefulWidget {
  const WebviewPage({Key? key}) : super(key: key);

  @override
  State<WebviewPage> createState() => _WebviewPageState();
}

class _WebviewPageState extends State<WebviewPage> {
  WebViewController? _controller;

  @override
  void initState() {
    String html = '''
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.docuseal.com/js/form.js"></script>
        </head>
        <body>
          <docuseal-form
            id="docusealForm"
            data-src="https://docuseal.com/d/LEVGR9rhZYf86M"
            data-email="signer@example.com">
          </docuseal-form>
        </body>
      </html>
      ''';

    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadHtmlString(html);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("DocuSeal Demo"),
          actions: const [],
        ),
        body: WebViewWidget(controller: _controller!));
  }
}

After adding this code to your app, you will see such a signing form in your app. However, you can customize its appearance and behavior using many parameters. You can read more about this in our documentation.

Conclusions

In this guide, we have only covered the most basic example of using DocuSeal in an Flutter app. DocuSeal has many other capabilities that you can use to enhance your app. For example, you can embed not only the Signing form on your app but also the Form builder. You can also use the API to fully automate the process of generating custom documents using HTML and then sending them for signer without using the DocuSeal web UI.

Related Links