--- title: "Configure Flutter PDF viewer user interface" canonical_url: "https://www.nutrient.io/guides/flutter/user-interface/configuration/" md_url: "https://www.nutrient.io/guides/flutter/user-interface/configuration.md" last_updated: "2026-05-23T00:08:18.095Z" description: "Customize the PDF viewer interface in Flutter using Nutrient Flutter SDK. Learn how to configure toolbar titles, navigation buttons, and page settings." --- # Configuring PDF view properties The `configuration` property for `NutrientView` enables you to customize various properties of the PDF view. Below is an example that sets your PDF view configuration: ```dart NutrientView( documentPath: document.path, configuration: PdfConfiguration( toolbarTitle: 'Nutrient Flutter Example', scrollDirection: ScrollDirection.horizontal, pageLayoutMode: PageLayoutMode.single, pageTransition: PageTransition.scrollContinuous, spreadFitting: SpreadFitting.fit, immersiveMode: false, showPageLabels: true, showActionNavigationButtons: true, userInterfaceViewMode: UserInterfaceViewMode.automatic, androidShowSearchAction: true, inlineSearch: false, showThumbnailBar: ThumbnailBarMode.floating, androidShowThumbnailGridAction: true, androidShowOutlineAction: true, androidShowAnnotationListAction: true, documentLabelEnabled: false, invertColors: false, androidGrayScale: false, startPage: 2, enableAnnotationEditing: true, enableTextSelection: false, androidShowBookmarksAction: false, androidEnableDocumentEditor: false, androidShowShareAction: true, androidShowPrintAction: false, androidShowDocumentInfoView: true, appearanceMode: AppearanceMode.defaultMode, androidDefaultThemeResource: 'Nutrient.Theme.Example', iOSRightBarButtonItems: [ 'thumbnailsButtonItem', 'activityButtonItem', 'searchButtonItem', 'annotationButtonItem' ], iOSLeftBarButtonItems: ['settingsButtonItem'], iOSAllowToolbarTitleChange: false, firstPageAlwaysSingle: true, enableInstantComments: true, webConfiguration: PdfWebConfiguration( allowPrinting: false, disableForms: false, showAnnotationNotes: true, showSignatureValidationStatus: ShowSignatureValidationStatusMode.ifSigned, sideBarMode: SidebarMode.annotations, spreadSpacing: 20, enableClipboardActions: true, autoSaveMode: AutoSaveMode.disabled, )), ); ``` ## Configuration options Following is a complete list of configuration options supported by each platform. Some options are supported on only one platform because of platform behavior differences. Options that work on only one platform are prefixed with the platform name for Android and iOS. For Web, options are grouped under the `webConfiguration` property. The options are grouped by category below. ## Document interaction options - Configuration option - Data type - Possible values - iOS - Android - Web - Description --- - `scrollDirection` - `String` - `horizontal`, `vertical` - ✅ - ✅ - ✅ - Configures the direction of page scrolling in the document view. --- - `pageTransition` - `String` - `scrollPerSpread`, `scrollContinuous`, `curl` - ✅ - ✅ - ✅ - Configures the page scrolling mode. `curl` mode is only available for iOS and will be ignored on Android. --- - `enableTextSelection` - `Boolean` - `true`/`false` - ✅ - ✅ - ✅ - Enables or disables text selection. ## Document presentation options - Configuration option - Data type - Possible values - iOS - Android - Web - Description --- - `pageMode` - `String` - `single`, `double`, `automatic` - ✅ - ✅ - ✅ - Configures the page mode. --- - `spreadFitting` - `String` - `fit`, `fill`, `adaptive` - ✅ - ✅ - ✅ - Controls the page fitting mode. `adaptive` mode only works on iOS and has no effect on Android. --- - `showPageLabels` - `Boolean` - `true`/`false` - ✅ - ✅ - ❌ - Displays the current page number. --- - `startPage` - `Integer` - - - ✅ - ✅ - ✅ - Configures the starting page number. --- - `documentLabelEnabled` - `Bool` - `true`/`false` - ✅ - ✅ - ✅ - Shows an overlay displaying the document name. --- - `firstPageAlwaysSingle` - `Boolean` - `true`/`false` - ✅ - ✅ - ❌ - Shows the first page separately. --- - `invertColors` - `Boolean` - `true`/`false` - ✅ - ✅ - ✅ - Inverts the document color if `true`. --- - `password` - `String` - - - ✅ - ✅ - ✅ - The password needed to unlock the document. --- - `androidGrayScale` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Converts the document colors to grayscale. ## User interface options - Configuration option - Data type - Possible values - iOS - Android - Web - Description --- - `inlineSearch` - `Boolean` - `true`/`false` - ✅ - ✅ - ❌ - Sets the search bar type to inline or modal. --- - `toolbarTitle` - `String` - - - ✅ - ✅ - ❌ - Sets the title of the toolbar. For iOS, set `documentLabelEnabled`, `iOSUseParentNavigationBar`, and `iOSAllowToolbarTitleChange` to `false` in your configuration before setting the custom title. --- - `showActionNavigationButtons` - `Boolean` - `true`/`false` - ✅ - ✅ - ❌ - Shows action navigation buttons. --- - `userInterfaceViewMode` - `String` - `automatic`, `automaticBorderPages`, `automaticNoFirstLastPage`, `always`, `alwaysVisible`, `alwaysHidden`, `never` - ✅ - ✅ - ✅ - Configures the user interface visibility. --- - `immersiveMode` - `Boolean` - `true`/`false` - ✅ - ✅ - ❌ - Hides the user interface if set to `true`. --- - `appearanceMode` - `String` - `default`, `night`, `sepia` - ✅ - ✅ - ✅ - Sets the appearance mode for the document. --- - `settingsMenuItems` - [Array of `String`] - `pageTransition`, `scrollDirection`, `androidTheme`, `iOSAppearance`, `androidPageLayout`, `iOSPageMode`, `iOSSpreadFitting`, `androidScreenAwake`, `iOSBrightness` - ✅ - ✅ - ❌ - Options that will be presented in the Settings menu. The options prefixed with iOS or Android only work on the respective platform. Options without any prefix work on both platforms. --- - `androidShowSearchAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables/disables document search functionality. For iOS, add `searchButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidShowOutlineAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables/disables the Outline menu in the activity. For iOS, add `outlineButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidShowBookmarksAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables/disables the bookmark list. For iOS, add `bookmarkButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidShowShareAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables the display of share features. For iOS, add `activityButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidShowPrintAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables the printing option in the menu, if applicable, for the document and the device. For iOS, add `printButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidShowDocumentInfoView` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables the display of document information. For iOS, add `outlineButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidEnableDocumentEditor` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables/disables the document editor button. For iOS, add `documentEditorButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. --- - `androidDarkThemeResource` - `String` - - - ❌ - ✅ - ❌ - The resource string for the dark theme. --- - `androidDefaultThemeResource` - `String` - - - ❌ - ✅ - ❌ - The resource string for the default theme. --- - `iOSLeftBarButtonItems` - [Array of `String`] - `closeButtonItem`, `outlineButtonItem`, `searchButtonItem`, `thumbnailsButtonItem`, `documentEditorButtonItem`, `printButtonItem`, `openInButtonItem`, `emailButtonItem`, `messageButtonItem`, `annotationButtonItem`, `bookmarkButtonItem`, `brightnessButtonItem`, `activityButtonItem`, `settingsButtonItem`, `readerViewButtonItem` - ✅ - ❌ - ❌ - Set the left bar button items. For Android, set individual options such as `androidShowOutlineAction`, `androidShowSearchAction`, etc. to achieve the same functionality. --- - `iOSRightBarButtonItems` - [Array of `String`] - `closeButtonItem`, `outlineButtonItem`, `searchButtonItem`, `thumbnailsButtonItem`, `documentEditorButtonItem`, `printButtonItem`, `openInButtonItem`, `emailButtonItem`, `messageButtonItem`, `annotationButtonItem`, `bookmarkButtonItem`, `brightnessButtonItem`, `activityButtonItem`, `settingsButtonItem`, `readerViewButtonItem` - ✅ - ❌ - ❌ - Set the right bar button items. For Android, set individual options such as `androidShowOutlineAction`, `androidShowSearchAction`, etc. to achieve the same functionality. --- - `iOSAllowToolbarTitleChange` - `Boolean` - `true`/`false` - ✅ - ❌ - ❌ - Enables Nutrient SDK to change the title of this view controller. ## Thumbnail options - Configuration option - Data type - Possible values - iOS - Android - Web - Description --- - `showThumbnailBar` - `String` - `none`, `default`, `floating`, `pinned`, `scrubberBar`, `scrollable` - ✅ - ✅ - ✅ - Thumbnail bar mode controls the display of page thumbnails viewing a document. --- - `androidShowThumbnailGridAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Displays an action bar icon to show a grid of thumbnail pages. For iOS, add `thumbnailsButtonItem` to `iOSLeftBarButtonItems` or `iOSRightBarButtonItems` to achieve the same functionality. ## Annotation, form, and bookmark options - Configuration option - Data type - Possible values - iOS - Android - Web - Description --- - `enableAnnotationEditing` - `Boolean` - `true`/`false` - ✅ - ✅ - ✅ - Configuration to enable/disable editing all annotations. --- - `androidShowAnnotationListAction` - `Boolean` - `true`/`false` - ❌ - ✅ - ❌ - Enables the list of annotations. For iOS, add `outlineButtonItem` to `iOSLeftBarButtonItems`, or `iOSRightBarButtonItems` to achieve the same functionality. ## Web-only options The Web-specific options are grouped into `webConfiguration`, which takes a `PdfWebConfiguration` object. The options are shown below. - Configuration option - Data type - Possible values - iOS - Android - Web - Description --- - `AutoSaveMode` - `Boolean` - `disabled`, `immediate`, `intelligent` - The auto-save mode to use. --- - `allowPrinting` - `Boolean` - `true` / `false` - ❌ - ❌ - ✅ - Whether to enable printing. --- - `disableForms` - `Boolean` - `true`/`false` - ❌ - ❌ - ✅ - Whether to disable forms. --- - `showAnnotationNotes` - `Boolean` - `true`/`false` - ❌ - ❌ - ✅ - Whether to show annotation notes. --- - `showSignatureValidationStatus` - `String` - `always`, `ifSigned`, `never` - ❌ - ❌ - ✅ - The mode for showing signature validation status. --- - `sideBarMode` - `String` - `annotations`, `bookmarks`, `thumbnails`, `documentInfo`, `outline` - ❌ - ❌ - ✅ --- - `spreadSpacing` - `Number` - - - ❌ - ❌ - ✅ - The spacing between spreads. --- - `enableClipboardActions` - `Boolean` - `true`/`false` - ❌ - ❌ - ✅ - Whether to enable clipboard actions. --- - `interactionMode` - `String` - `automatic`, `selectionOnly`, `inkOnly` - ❌ - ❌ - ✅ - The interaction mode to use. --- - `sidebarMode` - `String` - `annotations`, `bookmarks`, `thumbnails`, `documentInfo`, `outline` - ❌ - ❌ - ✅ - The sidebar mode to use. --- - `canScrollWhileDrawing` - `Boolean` - `true`/`false` - ❌ - ❌ - ✅ - Whether to enable scrolling while drawing. --- - `keepFirstSpreadAsSinglePage` - `Boolean` - `true`/`false` - ❌ - ❌ - ✅ --- - `keepSelectedTool` - `Boolean` - `true`/`false` - ❌ - ❌ - ✅ --- - `pageSpacing` - `Number` - - - ❌ - ❌ - ✅ - The spacing between pages. --- - `pageRotation` - `Number` - - - ❌ - ❌ - ✅ - The rotation of the page. --- - `previewRedactionMode` - `Boolean` - `true` / `false` - ❌ - ❌ - ✅ - Whether to preview redaction mode. --- - `showAnnotationNotes` - `Boolean` - `true` / `false` - ❌ - ❌ - ✅ - Whether to show annotation notes. --- - `customFonts` - `Array` - - - ❌ - ❌ - ✅ - An array of custom fonts to load. --- - `customRenderers` - `Object` - - - ❌ - ❌ - ✅ - Custom renderers to use. --- - `customUIConfiguration` - `Object` - - - ❌ - ❌ - ✅ - Custom UI configuration to use. --- - `electronicSignatures` - `Object` - - - ❌ - ❌ - ✅ - Electronic signatures configuration to use. --- - `formDesignMode` - `Boolean` - `true` / `false` - ❌ - ❌ - ✅ - Whether to enable form design mode. --- - `maxMentionSuggestions` - `Number` - - - ❌ - ❌ - ✅ - The maximum number of mention suggestions to show. --- - `mentionableUsers` - `Array` - - - ❌ - ❌ - ✅ - An array of mentionable users. --- - `restrictAnnotationToPageBounds` - `Boolean` - `true` / `false` - ❌ - ❌ - ✅ - Restrict annotations to page bounds. --- - `stampAnnotationTemplates` - `Array` - - - ❌ - ❌ - ✅ - An array of stamp annotation templates. --- - `styleSheets` - `Array` - - - ❌ - ❌ - ✅ - An array of style sheets to load. --- - `theme` - `String` - `light`, `dark` - ❌ - ❌ - ✅ - The web theme to use. --- - `toolbarPlacement` - `String` - `top`, `bottom` - ❌ - ❌ - ✅ - The toolbar placement to use. --- - `zoom` - `Number` - - - ❌ - ❌ - ✅ - The zoom level to use. --- - `minDefaultZoomLevel` - `Number` - - - ❌ - ❌ - ✅ - The minimum default zoom level. --- - `maxDefaultZoomLevel` - `Number` - - - ❌ - ❌ - ✅ - The maximum default zoom level. --- - `zoomStep` - `Number` - - - ❌ - ❌ - ✅ - The zoom step to use. --- - `toolbarItems` - `Array` - - - ❌ - ❌ - ✅ - An array of items to show in the toolbar. --- - `xfdf` - `String` - - - ❌ - ❌ - ✅ - The XFDF string to load into the document. --- - `xfdfKeepCurrentAnnotations` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to keep the current annotations when loading XFDF. --- - `autoCloseThreshold` - `Number` - - - ❌ - ❌ - ✅ - The threshold for automatically closing the document. --- - `baseCoreUrl` - `String` - - - ❌ - ❌ - ✅ - The base URL for the Nutrient Core library. --- - `baseUrl` - `String` - - - ❌ - ❌ - ✅ - The base URL for Document Engine. --- - `container` - `String` - - - ❌ - ❌ - ✅ - The ID of the container element for the viewer. --- - `disableHighQualityPrinting` - `bool` - `true` / `false` - ❌ - ❌ - ✅ - Whether to disable high-quality printing. --- - `disableMultiSelection` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to disable multi-selection. --- - `disableOpenParameters` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to disable open parameters. --- - `disableTextSelection` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to disable text selection. --- - `disableWebAssemblyStreaming` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to disable WebAssembly streaming. --- - `documentEditorFooterItems` - `Array` - - - ❌ - ❌ - ✅ - An array of items to show in the document editor footer. --- - `documentEditorToolbarItems` - `Array` - - - ❌ - ❌ - ✅ - An array of items to show in the document editor toolbar. --- - `documentId` - `String` - - - ❌ - ❌ - ✅ - The ID of the document to load. --- - `editableAnnotationTypes` - `Array` - - - ❌ - ❌ - ✅ - An array of editable annotation types. --- - `enableAutomaticLinkExtraction` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to enable automatic link extraction. --- - `enableHistory` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to enable history. --- - `enableServiceWorkerSupport` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to enable service worker support. --- - `formFieldsNotSavingSignatures` - `Array` - - - ❌ - ❌ - ✅ - An array of form fields that shouldn’t save signatures. --- - `headless` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to run in headless mode. --- - `instant` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to run in Instant mode (server only). --- - `instantJSON` - `Object` - - - ❌ - ❌ - ✅ - The JSON configuration for Instant mode (server only). --- - `locale` - `String` - - - ❌ - ❌ - ✅ - The locale to use. --- - `maxPasswordRetries` - `Number` - - - ❌ - ❌ - ✅ - The maximum number of password retries. --- - `overrideMemoryLimit` - `Number` - - - ❌ - ❌ - ✅ - The memory limit to override. --- - `preventTextCopy` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to prevent text copy. --- - `printOptions` - `Object` - - - ❌ - ❌ - ✅ - The print options to use. --- - `serverUrl` - `String` - - - ❌ - ❌ - ✅ - The URL of Document Engine (server only). --- - `standaloneInstancesPoolSize` - `Number` - - - ❌ - ❌ - ✅ - The size of the standalone instances pool. --- - `viewportPadding` - `Number` - - - ❌ - ❌ - ✅ - The viewport padding to use. --- - `annotationToolbarItems` - `Array` - - - ❌ - ❌ - ✅ - An array of items to show in the annotation toolbar. --- - `useCDN` - `bool` - `true`/`false` - ❌ - ❌ - ✅ - Whether to load Nutrient Web SDK assets from the CDN instead of self-hosted files. Defaults to `true`. Set to `false` for self-hosted deployments. --- ## Related pages - [Customizing our PDF viewer in Flutter](/guides/flutter/user-interface.md) - [Customizing PDF viewer styling in Flutter](/guides/flutter/user-interface/appearance-styling.md) - [Localization: Change languages in our Flutter PDF viewer](/guides/flutter/user-interface/localization.md) - [NutrientView Flutter widget](/guides/flutter/user-interface/nutrientview.md) - [Show or hide the UI in our Flutter viewer](/guides/flutter/user-interface/ui-visibility.md) - [View configuration reference](/guides/flutter/user-interface/view-configuration.md)