Customizing the Toolbar in Our Flutter Viewer

The main toolbar in PSPDFKit is designed to be flexible and configurable. This guide details how to customize the main toolbar.

PSPDFKit provides several preconfigured buttons that can be used for actions such as annotation editing, sharing a document, searching, opening the bookmarks view, etc. These buttons can be configured to be shown or hidden on the main toolbar, according to your use case. The way to customize these buttons is slightly different on Android, iOS, and Web.

Below are examples showing how to customize the main toolbar.

Android and iOS

// First copy the document from assets to the temporary directory.
await PspdfkitWidget(documentPath: document.path, configuration: PdfConfiguration(

    // Common options:
    enableAnnotationEditing: true, // Annotation item on the main toolbar.
    toolbarTitle: 'Custom Title',
    iOSAllowToolbarTitleChange: false,

    // iOS-specific options:
    iOSRightBarButtonItems: [ // List of buttons to show on the right side of the main toolbar.
        'thumbnailsButtonItem',
        'activityButtonItem',
        'annotationButtonItem',
        'searchButtonItem'
    ],
    iOSLeftBarButtonItems: [ // List of buttons to show on the left side of the main toolbar. (Only one item supported.)
        'settingsButtonItem'
    ],

    // Android-specific options:
    androidShowSearchAction: true, // Search action on the main toolbar.
    androidShowThumbnailGridAction: true, // Document editor action on the main toolbar.
    androidShowShareAction: true, // Share action on the main toolbar.
    androidShowPrintAction: true, // Print item on the main toolbar and inside the sharing sheet.
    androidEnableDocumentEditor: true, // Enable document editing in thumbnail view.
));

This is how the toolbar looks after customization:

Android
iOS

Web

You can customize the toolbar using the PdfWebConfiguration object set as the webConfiguration property:

// First, get the `defaultToolbarItems` for Web.
final defaultWebToolbarItems = Pspdfkit.defaultWebToolbarItems;

/// Add a custom button to the toolbar.
await PspdfkitWidget(documentPath: document.path, configuration: PdfConfiguration(
    webConfiguration: PdfWebConfiguration(
        toolbarItems: [
            ...defaultWebToolbarItems,
            PspdfkitWebToolbarItem(
                type: PspdfkitWebToolbarItemType.custom,
                title: 'Custom Button',
                onPress: () {
                    print('Custom button Pressed');
                }
            )
        ]
    )
));