Effortlessly Fill and Share PDF Forms using Flutter PDF Viewer
Tags: flutter, mobile, pdfviewer, productivity
Published: 2024-03-14 11:10:21

---
title: Effortlessly Fill and Share PDF Forms using Flutter PDF Viewer
published: true
date: 2024-03-07 13:09:45 UTC
tags: flutter, mobile, pdfviewer, productivity
canonical_url: https://www.syncfusion.com/blogs/post/fill-share-pdf-forms-flutter.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb7n1z8wyaamerr8ilt7.png
---
**TLDR:** Syncfusion Flutter PDF Viewer allows filling forms in a PDF document with various form fields, such as, Text box, radio button, signature and more. We’ll learn to create a Flutter app with dependencies, loading a PDF form document, filling the data in the form fields, and sharing the filled form externally by designing a Share button.

Filling out PDF forms electronically is a way to digitize the manual process of filling out paper forms. It also streamlines data collection processes, enhances accuracy, and contributes to a more efficient and environmentally friendly approach to handling information.

Our [Syncfusion Flutter PDF Viewer](https://www.syncfusion.com/flutter-widgets/flutter-pdf-viewer "Flutter PDF Viewer") allows you to fill, edit, save, export, and import the AcroForm fields in a PDF document. This helps fill out job applications, registration, and medical forms. We support to fill and edit the following form fields in a PDF document,

- Text box
- Checkbox
- Radio button
- Combo box
- Signature
- List box

In this blog, we’ll see the steps to fill out a registration form with proper validations using **Syncfusion Flutter PDF Viewer** and share the filled PDF form externally via the platform’s share dialog.

## Create a Flutter app and add dependencies

First, [create a new Flutter app](https://docs.flutter.dev/get-started/codelab "Write your first Flutter app") and add the following dart packages as dependencies in it:

- **syncfusion\_flutter\_pdfviewer**
- **path\_provider**
- **share\_plus**

Refer to the following code example.

```c#
dependencies:
  flutter:
    sdk: flutter
  path_provider: ^X.X.X
  share_plus: ^X.X.X
  syncfusion_flutter_pdfviewer: ^X.X.X
```

**Note:** The **X.X.X** denotes the version of the packages.

After adding the dependencies, import the following required packages in your dart code.

```c#
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';
```

## Fill and share a registration form using Flutter PDF Viewer

Here, we’re going to fill and share a PDF form for workshop registration using Flutter PDF Viewer by following these steps:

**Step 1:** Create a **PdfFormFilling** widget class and a **PdfFormFillingState** class to build and display the fillable registration PDF form in the **SfPdfViewer**. We’ll also create a floating **Share** button option to share the filled PDF form externally.

```c#
/// Represents the SfPdfViewer widget loaded with the form document.
class PdfFormFilling extends StatefulWidget {
  @override
  _HomePage createState() => _HomePage();
}

class _HomePage extends State<PdfFormFilling> {
  final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
  final PdfViewerController _pdfViewerController = PdfViewerController();
  List<PdfFormField>? _formFields;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Registration Form'),
      ),
      body: SfPdfViewer.asset(
        'assets/workshop_registration.pdf',
        key: _pdfViewerKey,
        controller: _pdfViewerController,
        onFormFieldFocusChange: _onFormFieldFocusChange,
        onDocumentLoaded: _onDocumentLoaded,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          _validateAndShareFormData();
        },
        label: const Text('SHARE', style: TextStyle(fontSize: 20)),
        icon: const Icon(Icons.share),
      ),
    );
  }
}
```

In this example, we used the PDF named [workshop\_registration](https://github.com/SyncfusionExamples/Fill-and-share-PDF-form-files-in-Flutter/blob/master/assets/registration_form.pdf "workshop\_registration PDF document"), which contains the following form fields:

- Name
- Email
- Gender
- Date of Birth
- State (Coming from)
- Interested courses
- Newsletter subscription and
- Signature

**Step 2:** To make things easier for the users, we added a **DatePicker** widget to pick a date when the **Date of Birth** field is focused. This is done with the help of the PDF Viewer’s **onFormFieldFocusChange** callback, and the following code explains the same.

```c#
/// Handle focus change on the DOB field to display DatePicker.
Future<void> _onFormFieldFocusChange(
 PdfFormFieldFocusChangeDetails details) async {
  final PdfFormField formField = details.formField;
  if (details.hasFocus) {
    if (formField is PdfTextFormField && formField.name == 'dob') {
      final DateTime? selectedDate = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1950),
        lastDate: DateTime.now(),
      );

      if (selectedDate != null) {
        formField.text =
            '${selectedDate.day}/${selectedDate.month}/${selectedDate.year}';
      }

      FocusManager.instance.primaryFocus?.unfocus();
    }
  }
}
```

**Note:** Like this, you can also use the **onFormFieldFocusChange** callback to present your widgets and messages.

**Step 3:** Once the required fields are filled, we must validate the data in the form fields.

Let’s use the **\_validateAndShareFormData( )** method to perform validation. This method is invoked in the **Share** floating button’s **onPressed** callback.

```c#
/// Perform validations on the form data filled and share them externally.
Future<void> _validateAndShareFormData() async {
  final List<String> errors = <String>[];
  for (final PdfFormField formField in _formFields!) {
    if (formField is PdfTextFormField) {
      if (formField.name == 'name') {
        if (formField.text.isEmpty) {
          errors.add('Name is required.');
        } else if (formField.text.length < 3) {
          errors.add('Name should be atleast 3 characters.');
        } else if (formField.text.length > 30) {
          errors.add('Name should not exceed 30 characters.');
        } else if (formField.text.contains(RegExp(r'[0-9]'))) {
          errors.add('Name should not contain numbers.');
        } else if (formField.text
            .contains(RegExp(r'[!@#$%^&*(),.?":{}|<>]'))) {
          errors.add('Name should not contain special characters.');
        }
      }
      if (formField.name == 'dob') {
        if (formField.text.isEmpty) {
          errors.add('Date of birth is required.');
        } else if (!RegExp(r'^\d{1,2}\/\d{1,2}\/\d{4}$')
            .hasMatch(formField.text)) {
          errors.add('Date of birth should be in dd/mm/yyyy format.');
        }
      }
      if (formField.name == 'email') {
        if (formField.text.isEmpty) {
          errors.add('Email is required.');
        }
        // Email regex comparison
        else if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$')
            .hasMatch(formField.text)) {
          errors.add('Email should be in correct format.');
        }
      }
    } else if (formField is PdfListBoxFormField) {
      if (formField.selectedItems == null ||
          formField.selectedItems!.isEmpty) {
        errors.add('Please select atleast one course.');
      }
    } else if (formField is PdfSignatureFormField) {
      if (formField.signature == null) {
        errors.add('Please sign the document.');
      }
    }
  }

  if (errors.isNotEmpty) {
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Error'),
          content: SizedBox(
            height: 100,
            width: 100,
            child: ListView.builder(
              itemCount: errors.length,
              itemBuilder: (_, int index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(errors[index]),
                );
              },
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('OK'),
            ),
          ],
        );
      },
    );
  } else {
    _shareForm();
  }
}

void _onDocumentLoaded(PdfDocumentLoadedDetails details) {
  _formFields = _pdfViewerController.getFormFields();
}
```

**Step 4:** Finally, if the validations are passed, we can share the filled PDF form externally via the platform’s share dialog. The **\_shareForm( )** method has the logic to perform sharing, which is called in the **\_validateAndShareFormData( )** method.

Refer to the following code example.

```c#
/// Share the Form externally via the platform's share dialog.
Future<void> _shareForm() async {
  List<int> savedBytes = await _pdfViewerController.saveDocument();
  String dir = (await getApplicationCacheDirectory()).path;

  // Save the temporary file in the cache directory.
  File('$dir/workshop_registration.pdf').writeAsBytesSync(savedBytes);

  List<XFile> files = [
    XFile('$dir/workshop_registration.pdf', mimeType: 'application/pdf'),
  ];

  // Share the file.
  await Share.shareXFiles(files, subject: 'Form document shared successful-ly.');

  // Remove the file from the cache directory.
  File('$dir/workshop_registration.pdf').deleteSync();
}
```

**Note:** Before sharing the form document, it will be saved first. When the **saveDocument** method is called, the document will be automatically reloaded after performing the save action in the PDF Viewer. Also, the signature field will be flattened on save.

You will get the output after executing the above code examples, as shown in the following image.
 ![Form Filling Output on Flutter PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Form-Filling-Output-on-Flutter-PDF-Viewer.gif)
## References

For more details, refer to the [Filling and sharing PDF form files using Flutter PDF Viewer](https://github.com/SyncfusionExamples/Fill-and-share-PDF-form-files-in-Flutter "Filling and sharing PDF form files using Flutter PDF Viewer GitHub demo") GitHub demo and [documentation](https://help.syncfusion.com/flutter/pdf-viewer/form-filling "Get Started with Form filling in Flutter PDF Viewer").

## Conclusion

Thanks for reading! You now know how to fill out forms, perform validations, and share them using [Flutter PDF Viewer](https://www.syncfusion.com/flutter-widgets/flutter-pdf-viewer "Flutter PDF Viewer"). Try this in your app and share your feedback in the comments below.

The new version is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you still need to become a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads/flutter "Get free evaluation of the Essential Studio for Flutter") to check out our newest features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/support/tickets "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Sneak Peek at 2024 Volume 1: Flutter](https://www.syncfusion.com/blogs/post/2024-vol-1-flutter-sneak-peek.aspx "Blog: Sneak Peek at 2024 Volume 1: Flutter")
- [Charting Magic: A Performance Boost with Syncfusion Flutter Charts](https://www.syncfusion.com/blogs/post/performance-boost-flutter-charts.aspx "Blog: Charting Magic: A Performance Boost with Syncfusion Flutter Charts")
- [Create Dynamic Forms in Flutter](https://www.syncfusion.com/blogs/post/dynamic-forms-in-flutter.aspx "Blog: Create Dynamic Forms in Flutter")
- [Seamless Excel-Like Filtering Support in Flutter DataGrid](https://www.syncfusion.com/blogs/post/seamless-excel-like-filtering-in-flutter-datagrid.aspx "Blog: Seamless Excel-Like Filtering Support in Flutter DataGrid")