Guides

Context Menu

When creating a CPDFReaderWidget, you can customize the context menus that appear when annotations, text, images, or form fields are selected. This is done via the CPDFConfiguration object using the contextMenuConfig field.

Default Context Menu

By default, when a user selects a highlight annotation, ComPDF displays a context menu with common options such as “Note”, “Delete”, and “Properties”:

Android	iOS

Customizing Menu Items

You can customize the context menu by specifying which menu items to include. The following example only keeps the Properties and Delete options for highlight annotations:

CPDFReaderWidget(
  document: widget.documentPath,
  password: widget.password,
  configuration: CPDFConfiguration(
    contextMenuConfig: const CPDFContextMenuConfig(
      annotationMode: CPDFAnnotationModeContextMenu(
        markup: [
          CPDFContextMenuItem(CPDFAnnotationMarkupMenuKey.properties),
          CPDFContextMenuItem(CPDFAnnotationMarkupMenuKey.delete),
        ]
      )
    )
  ),
  onCreated: (controller) {
  },
);

Android	iOS

Custom Menu Items

ComPDF Flutter SDK introduced the ability to add custom menu items in version 2.6.0. The following example demonstrates how to add a custom menu item to the context menu for highlight annotations:

1. Create a CPDFContextMenuItem instance and configure the custom menu item:

CPDFConfiguration(
  contextMenuConfig: const CPDFContextMenuConfig(
    fontSize: 14,             // Custom menu font size
    iconSize: 36,             // Custom menu icon size (Android only)
    padding: [0, 4, 0, 4],    // Menu padding
    annotationMode: CPDFAnnotationModeContextMenu(
      markup: [
        CPDFContextMenuItem(
          CPDFAnnotationMarkupMenuKey.custom,
          identifier: 'custom_show_annotation_properties_action',  // Required: Unique identifier
          title: 'Custom Action',                                   // Required: Menu title (when showType is text)
          icon: 'ic_test_properties',                              // Optional: Icon name (Android only, required when showType is icon)
          showType: CPDFContextMenuShowType.text,                  // Display type: icon or text
        )
      ]
    ),
  )
);

2. Handle custom menu item tap events via the onCustomContextMenuItemTappedCallback callback:

CPDFReaderWidget(
  document: documentPath,
  configuration: configuration,
  onCreated: (controller) {
    setState(() {
      _controller = controller;
    });
  },
  onCustomContextMenuItemTappedCallback: (String identifier, dynamic event) {
    if (identifier == 'custom_show_annotation_properties_action') {
      // Handle custom menu item tap event
      // For example: show custom dialog, perform specific action, etc.
    }
  },
);

Context Menu Configuration Fields

Field	Description
fontSize	Text size of context menu items. Default is 14.
padding	Menu padding in [left, top, right, bottom] order.
iconSize	Icon size. Supported on Android.
key	Built-in menu key. Use custom for custom menu items.
identifier	Unique identifier returned by onCustomContextMenuItemTappedCallback for custom menu items.
title	Menu text when showType is text.
icon	Icon resource name. Supported on Android for context menu items.
showType	Display mode, text or icon.

Platform note: Context menu icon display is Android-only. On iOS, prefer text menu items and handle custom behavior through the callback.