Skip to content

View Modes

When you open a document using CPDFReaderWidget or ComPDFKit.openDocument(), you can set the default display mode according to your product's needs. For example, the default Viewer Mode allows viewing PDF documents and filling out forms but does not allow editing annotations, text, etc.

Setting the Default Mode

The following example demonstrates how to set Annotation Mode as the default display mode. In Annotation Mode, users can add, delete, and modify annotations.

dart
// CPDFReaderWidget Sample
Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    title: const Text('CPDFReaderWidget Example'),
  ),
  body: CPDFReaderWidget(
    document: documentPath,
    configuration: CPDFConfiguration(
      modeConfig: const ModeConfig(initialViewMode: CPreviewMode.annotations)
    ),
    onCreated: (controller) {
    },
  ));


// ComPDFKit.openDocument Sample
ComPDFKit.openDocument(documentPath, '', CPDFConfiguration(
  modeConfig: const ModeConfig(initialViewMode: CPreviewMode.annotations)
));

The results are as follows:

AndroidiOS

Setting the Mode List

You can switch modes by clicking the top title. Depending on your needs, you can configure the required modes and their display order in CPDFConfiguration. The following example shows how to configure only Viewer Mode and Annotation Mode:

dart
// CPDFReaderWidget Sample
Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    title: const Text('CPDFReaderWidget Example'),
  ),
  body: CPDFReaderWidget(
    document: documentPath,
    configuration: CPDFConfiguration(
      modeConfig: const ModeConfig(availableViewModes: [
        CPreviewMode.viewer,
        CPreviewMode.annotations
      ])
    ),
    onCreated: (controller) {
    },
  ));


// ComPDFKit.openDocument Sample
ComPDFKit.openDocument(documentPath, '', CPDFConfiguration(
  modeConfig: const ModeConfig(availableViewModes: [
    CPreviewMode.viewer,
    CPreviewMode.annotations
  ])
));

The results are as follows:

AndroidiOS