ComPDF
Contact Sales
DemoFAQ
、

PDF Generation Template Editor

Open-source visual PDF generation engine with customizable templates and developer-friendly APIs.

View on GitHub
Guides

Create Form Fields ​

The ComPDF Flutter SDK supports two ways to create form fields: through CPDFReaderWidget to enter form creation mode for interactive creation, or through CPDFDocument API for programmatic creation.

Interactive Creation ​

Through CPDFReaderWidget, users can enter form mode and add form fields through touch operations.

dart
CPDFReaderWidgetController? _controller;

// Initialize CPDFReaderWidget and obtain the controller in the onCreated callback
CPDFReaderWidget(
  document: documentPath,
  configuration: CPDFConfiguration(
    modeConfig: const CPDFModeConfig(
      initialViewMode: CPDFViewMode.forms)),
  onCreated: (controller) {

  });

await controller.setFormCreationMode(CPDFFormType.textField);

Exit Creation Mode ​

dart
await controller.exitFormCreationMode();

Programmatic Creation ​

Create form fields programmatically through the CPDFDocument API. The following examples demonstrate how to create various types of forms:

Note: The rect parameter defines the position and size of the form field on the page, with the origin of the coordinate system at the bottom-left corner of the page.

  • Create Text Field ​

dart
final textWidget = CPDFTextWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.textField),
  page: 0,
  createDate: DateTime.fromMillisecondsSinceEpoch(1735696800000),
  rect: const CPDFRectF(left: 40, top: 799, right: 320, bottom: 701),
  borderColor: Colors.lightGreen,
  alignment: CPDFAlignment.right,
  fillColor: Colors.green,
  borderWidth: 10,
  text: 'This text field is created using the Flutter API.',
  familyName: 'Times',
  styleName: 'Bold'
);
await controller.document.addWidgets([textWidget]);

  • Create Checkbox ​

dart
final checkBoxWidget = CPDFCheckBoxWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.checkBox),
  page: 0,
  rect: const CPDFRectF(left: 361, top: 778, right: 442, bottom: 704),
  borderColor: Colors.blue,
  fillColor: Colors.white,
  borderWidth: 10,
  checkColor: Colors.blue,
  isChecked: true,
  checkStyle: CPDFCheckStyle.circle
);
await controller.document.addWidgets([checkBoxWidget]);

  • Create Radio Button ​

dart
final radioButtonWidget = CPDFRadioButtonWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.radioButton),
  page: 0,
  rect: const CPDFRectF(left: 479, top: 789, right: 549, bottom: 715),
  borderColor: Colors.lightGreen,
  fillColor: Colors.yellow,
  borderWidth: 2,
  checkColor: Colors.lightGreen,
  isChecked: true,
  checkStyle: CPDFCheckStyle.diamond
);
await controller.document.addWidgets([radioButtonWidget]);

  • Create List Box ​

dart
final listBoxWidget = CPDFListBoxWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.listBox),
  page: 0,
  rect: const CPDFRectF(left: 53, top: 294, right: 294, bottom: 191),
  borderColor: Colors.blueAccent,
  fillColor: Colors.white,
  fontColor: Colors.black,
  fontSize: 18,
  familyName: 'Times',
  styleName: 'Bold',
  options: [
    CPDFWidgetItem(text: 'ComPDF', value: 'ComPDF'),
    CPDFWidgetItem(text: 'Flutter SDK', value: 'Flutter SDK'),
  ],
  selectItemAtIndex: 0
);
await controller.document.addWidgets([listBoxWidget]);

When creating a list box using CPDFReaderWidget, a dialog will automatically pop up by default to add options immediately. ComPDF Flutter SDK provides a configuration option to disable this dialog, as shown in the example:

dart
CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(
      formsConfig: const CPDFFormsConfig(
          showCreateListBoxOptionsDialog: false
      )
  )
);

You can also use controller.addEventListener(CPDFEvent.formFieldsCreated, (event) {}) to listen for form creation completion events and display a custom options list dialog for editing. For details, see Form Event Notifications.

  • Create Combo Box ​

dart
final comboBoxWidget = CPDFComboBoxWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.comboBox),
  page: 0,
  borderWidth: 5,
  rect: const CPDFRectF(left: 354, top: 288, right: 557, bottom: 170),
  borderColor: Colors.blueAccent,
  fillColor: Colors.white,
  fontColor: Colors.black,
  fontSize: 18,
  familyName: 'Times',
  styleName: 'Bold',
  options: [
    CPDFWidgetItem(text: 'ComPDF', value: 'ComPDF'),
    CPDFWidgetItem(text: 'Flutter SDK', value: 'Flutter SDK'),
  ],
  selectItemAtIndex: 0
);
await controller.document.addWidgets([comboBoxWidget]);

When creating a combo box using CPDFReaderWidget, a dialog will automatically pop up by default to add options immediately. ComPDF Flutter SDK provides a configuration option to disable this dialog, as shown in the example:

dart
CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(
      formsConfig: const CPDFFormsConfig(
        showCreateComboBoxOptionsDialog: false
      )
  )
);

You can also use controller.addEventListener(CPDFEvent.formFieldsCreated, (event) {}) to listen for form creation completion events and display a custom options list dialog for editing. For details, see Form Event Notifications.

  • Create Signature Field ​

dart
final signatureWidget = CPDFSignatureWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.signaturesFields),
  page: 0,
  rect: const CPDFRectF(left: 64, top: 649, right: 319, bottom: 527),
  borderColor: Colors.black,
  fillColor: Colors.white,
  borderWidth: 5
);
await controller.document.addWidgets([signatureWidget]);

  • Create Button ​

Buttons can be set with different action types, such as jumping to a webpage or jumping to a page.

dart
// URL button
final urlButtonWidget = CPDFPushButtonWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.pushButton),
  page: 0,
  rect: const CPDFRectF(left: 366, top: 632, right: 520, bottom: 541),
  borderColor: Colors.amberAccent,
  borderWidth: 5,
  fillColor: Colors.white,
  action: CPDFUriAction(uri: 'https://www.compdf.com'),
  buttonTitle: 'To Web'
);

// GoTo page button
final gotoButtonWidget = CPDFPushButtonWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.pushButton),
  page: 0,
  rect: const CPDFRectF(left: 365, top: 503, right: 501, bottom: 413),
  borderColor: Colors.indigoAccent,
  borderWidth: 5,
  fillColor: Colors.white,
  action: CPDFGoToAction(pageIndex: 1),
  buttonTitle: 'Jump Page 1',
  familyName: 'Times',
  styleName: 'Bold'
);

await controller.document.addWidgets([urlButtonWidget, gotoButtonWidget]);

When creating buttons using CPDFReaderWidget, an options editing dialog will automatically pop up by default to set button events immediately. ComPDF Flutter SDK provides a configuration option to disable this dialog, as shown in the example:

dart
CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(
      formsConfig: const CPDFFormsConfig(
        showCreatePushButtonOptionsDialog: false
      )
  )
);

You can also use controller.addEventListener(CPDFEvent.formFieldsCreated, (event) {}) to listen for form creation completion events and display a custom event editing dialog for editing. For details, see Form Event Notifications.

Supported Form Field Types

Type
textField
checkBox
radioButton
listBox
comboBox
signaturesFields
pushButton