Guides

Main Toolbar

The main toolbar in ComPDF is designed to be flexible and highly configurable. This guide demonstrates how to configure the main toolbar options and add fully customized menu items.

• Configure existing toolbar button items
• Add more menu options
• Customize menu options

Default Toolbar

The default toolbar contains the following tools:

Android	iOS

Configuring Toolbar Functions

You can customize the main toolbar buttons when displaying a PDF using the toolbarLeftItems and toolbarRightItems properties. The following example shows how to hide the menu button in the navigation bar (main toolbar) on iOS and how to customize Android toolbar menu items:

final CPDFConfiguration configuration = CPDFConfiguration(
  toolbarConfig: CPDFToolbarConfig(
    toolbarLeftItems: Platform.isIOS
    ? const [
      CPDFToolbarAction.back,
      CPDFToolbarAction.thumbnail,
    ]
    : const [
      CPDFToolbarAction.back,
    ],
    toolbarRightItems: Platform.isIOS
    ? const [
      CPDFToolbarAction.search,
      CPDFToolbarAction.bota,
    ]
    : const [
      CPDFToolbarAction.search,
      CPDFToolbarAction.thumbnail,
      CPDFToolbarAction.bota,
      CPDFToolbarAction.menu,
    ],
  ),
);

Note: Different platforms have different default toolbar interactions, so the example configures left and right toolbar buttons separately based on the platform.

Using CPDFReaderWidget to Open a Document

Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(),
  body: CPDFReaderWidget(
    document: documentPath,
    configuration: configuration,
    onCreated: (controller) {
      // ReaderView creation complete callback
    },
  ),
);

Using ComPDFKit.openDocument to Open a Document

ComPDFKit.openDocument(documentPath, 'password', configuration);

The customized toolbar will look like what’s shown below.

Android	iOS

Available Toolbar Option Types

Toolbar Button Item	Description
back	Display close button item.
thumbnail	Display thumbnails button item.
search	Display search button item.
bota	Display outline, bookmarks, annotation list button item.
menu	Display menu button item.
viewSettings	Open settings view and configure scroll direction, display mode, theme color, and other related settings.
documentEditor	Open document thumbnail list where you can delete, rotate, and add document pages.
documentInfo	Open document information view to display basic document information and permission information.
watermark	Open watermark editing view to add text and image watermarks and save as a new document.
security	Open security settings view to set document open password and permission password.
flattened	Flatten annotations in the document, making them uneditable.
save	Save PDF document.
share	Open system sharing functionality.
openDocument	Open system file selector to open a new PDF document.
custom	Custom menu option

Note: Please refer to CPDFToolbarAction for the relevant options.

More Menu

By configuring CPDFToolbarAction.menu in the main toolbar, you can display more menu options. Clicking it opens a popup where you can select additional options. The more menu is configured using availableMenus, with the same configuration method as described above.

Here is a configuration example:

CPDFConfiguration(
  toolbarConfig: CPDFToolbarConfig(
    availableMenus: const [
      CPDFToolbarAction.viewSettings,
      CPDFToolbarAction.documentEditor,
      CPDFToolbarAction.security,
      CPDFToolbarAction.watermark,
      CPDFToolbarAction.flattened,
      CPDFToolbarAction.documentInfo,
      CPDFToolbarAction.save,
      CPDFToolbarAction.share,
      CPDFToolbarAction.openDocument,
      CPDFToolbarAction.snip
    ]
  ));

Custom Menu

In version 2.6.0 and higher, you can add custom menu options through the customToolbarLeftItems, customToolbarRightItems, and customMoreMenuItems properties. Two customization methods are provided:

• Modify the icon and title of existing menu options
• Add completely custom menu options

Here is a configuration example:

CPDFConfiguration(
          toolbarConfig: CPDFToolbarConfig(
        customToolbarLeftItems: [                 // Custom left menu options
          CPDFCustomToolbarItem.action(action: CPDFToolbarAction.back),
          CPDFCustomToolbarItem.custom(
              identifier: 'custom_editor',        // Custom identifier, required
              icon: 'ic_test_edit'),              // Custom icon
        ],
        customToolbarRightItems: [                // Custom right menu options
          CPDFCustomToolbarItem.action(
              icon: 'ic_test_book',               // Custom icon
              action: CPDFToolbarAction.bota),
          CPDFCustomToolbarItem.custom(           // Custom menu option
              identifier: 'custom_text_search',
              icon: 'ic_test_search'),
          CPDFCustomToolbarItem.action(
              icon: 'ic_test_more',
              action: CPDFToolbarAction.menu),
        ],
        customMoreMenuItems: [
          CPDFCustomToolbarItem.action(
            action: CPDFToolbarAction.viewSettings),
          CPDFCustomToolbarItem.custom(
              identifier: 'custom_share',       // Custom identifier, required
              title: 'Custom Share',            // Custom title, only effective in more menu
              icon: 'ic_test_share')
        ],
      ));

Parameter Description

Parameter	Description
action	Required parameter, specifies the menu option to customize, refer to CPDFToolbarAction.
identifier	Required parameter, unique identifier for the custom menu option.
icon	Optional parameter, specifies the icon for the custom menu option, supports local resource image names or file paths.
title	Optional parameter, specifies the title text for the custom menu option. Only effective in more menu.

Adding Custom Menu Click Events

Only when using CPDFCustomToolbarItem.custom to customize menu options do you need to handle click events through the onCustomToolbarItemTappedCallback callback:

CPDFReaderWidget(
  document: documentPath,
  configuration: configuration,
  onCreated: (controller) {
    setState(() {
      this._controller = controller;
    });
  },
  onCustomToolbarItemTappedCallback: (String identifier) {
    if (identifier == 'custom_editor') {
      // Handle custom edit menu click event
    } else if (identifier == 'custom_text_search') {
      // Handle custom search menu click event
    } else if (identifier == 'custom_share') {
      // Handle custom share menu click event
    }
  },
);

Adding Custom Icons

To customize menu icons, you need to implement them differently on Android and iOS:

• Android: Place the icon file (e.g., ic_test_search) in the android/app/src/main/res/drawable directory.
• iOS: Add the icon file (e.g., ic_test_search) to the ios/Runner/Assets.xcassets asset catalog.