--- title: "NutrientViewConfiguration reference for Flutter | Nutrient SDK" canonical_url: "https://www.nutrient.io/guides/flutter/user-interface/view-configuration/" md_url: "https://www.nutrient.io/guides/flutter/user-interface/view-configuration.md" last_updated: "2026-05-26T09:21:30.416Z" description: "Configure the Nutrient Flutter viewer’s layout, UI, and editing capabilities using NutrientViewConfiguration. Full reference for cross-platform, Android, iOS, and Web options." --- # View configuration reference [`NutrientViewConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration-class.html) is the new configuration API for Nutrient Flutter viewer widgets. It’s currently used by the [`NutrientInstantView`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientInstantView-class.html) widget and will replace [`PdfConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/PdfConfiguration-class.html) as the standard configuration object going forward. `NutrientView` still uses [`PdfConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/PdfConfiguration-class.html) for configuration. [`NutrientViewConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration-class.html) isn’t yet supported by `NutrientView`. Refer to the [configuring PDF view properties](https://www.nutrient.io/guides/flutter/user-interface/configuration.md) guide for the current `NutrientView` configuration reference. [`NutrientViewConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration-class.html) controls the viewer’s layout, user interface (UI) chrome, editing capabilities, and appearance. All fields are optional — unset fields fall through to the native SDK’s built-in defaults, so only set the values that differ from the defaults. Options that apply to all platforms are top-level fields; options specific to one platform are grouped under [`androidConfig`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/androidConfig.html), [`iosConfig`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/iosConfig.html), or [`webConfig`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/webConfig.html). ```dart NutrientInstantView( serverUrl: serverUrl, jwt: jwt, configuration: const NutrientViewConfiguration( pageLayoutMode: PageLayoutMode.single, thumbnailBarMode: ThumbnailBarMode.floating, enableAnnotationEditing: true, enableFormEditing: true, androidConfig: AndroidViewConfiguration( showSearchAction: true, showOutlineAction: true, ), iosConfig: IOSViewConfiguration( spreadFitting: SpreadFitting.adaptive, ), ), ) ``` ## Cross-platform fields The following fields apply to Android, iOS, and Web unless otherwise noted. ### Layout | Field | Type | Description | | ----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------- | | [`scrollDirection`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/scrollDirection.html) | `ScrollDirection?` | The axis along which pages scroll: `horizontal` (default) or `vertical`. | | [`pageLayoutMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/pageLayoutMode.html) | `PageLayoutMode?` | How many pages appear side by side: `single`, `double`, or `automatic`. | | [`pageTransition`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/pageTransition.html) | `PageTransition?` | Animation used when moving between pages. See [`PageTransition` values](#pagetransition-values) below. | | [`firstPageAlwaysSingle`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/firstPageAlwaysSingle.html) | `bool?` | When `true`, the first page is always shown alone, even in double-page mode. Useful for documents with a full-width cover. | | [`startPage`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/startPage.html) | `int?` | Zero-based index of the page to open on. Applied on Android and Web; ignored on iOS. | #### PageTransition values | Value | Platforms | | --------------------------------------------------- | ------------------ | | `scrollContinuous` | Android, iOS, Web. | | `scrollPerSpread` | Android, iOS, Web. | | `curl` | iOS only. | | `slideHorizontal`, `slideVertical`, `cover`, `fade` | Android, iOS. | | `scrollContinuousPerPage`, `auto` | Android, iOS. | | `disabled` | Android, iOS, Web. | ### UI chrome | Field | Type | Description | | ------------------------------------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | | [`userInterfaceViewMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/userInterfaceViewMode.html) | `UserInterfaceViewMode?` | When the toolbar and overlays are visible: `automatic` (shown on tap), `always`, `automaticNoFirstLastPage`, or `never` (kiosk/immersive mode). | | [`thumbnailBarMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/thumbnailBarMode.html) | `ThumbnailBarMode?` | Where the page thumbnail strip appears: `none`, `defaultStyle`, `pinned`, `scrubberBar`, `scrollable`, or `floating`. | | [`appearanceMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/appearanceMode.html) | `AppearanceMode?` | Color theme: `defaultMode`, `sepia`, `night`, or `allCustomColors`. | ### Editing | Field | Type | Description | | -------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | | [`enableTextSelection`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/enableTextSelection.html) | `bool?` | Enable the user to select and copy text. | | [`enableAnnotationEditing`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/enableAnnotationEditing.html) | `bool?` | Enable creating, moving, and deleting annotations. When `false`, annotations are read-only. | | [`enableFormEditing`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/enableFormEditing.html) | `bool?` | Enable filling in PDF form fields. When `false`, fields are rendered but not interactive. | | [`disableAutosave`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/disableAutosave.html) | `bool?` | When `true`, the SDK doesn’t automatically save changes. The app triggers saves manually via [`NutrientViewHandle`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewHandle-class.html). | ### Zoom These fields apply to iOS and Web. Android doesn’t expose zoom constraints through its configuration builder. See [`minimumZoomScale`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/minimumZoomScale.html) and [`maximumZoomScale`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/maximumZoomScale.html). | Field | Type | Description | | ------------------------------------------------ | --------- | --------------------------------------------- | | [`minimumZoomScale`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/minimumZoomScale.html) | `double?` | Minimum zoom factor the user can zoom out to. | | [`maximumZoomScale`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/maximumZoomScale.html) | `double?` | Maximum zoom factor the user can zoom in to. | ## AndroidViewConfiguration [`AndroidViewConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration-class.html) holds options that only apply to the Android platform. Pass it as [`NutrientViewConfiguration.androidConfig`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/androidConfig.html). It’s silently ignored on iOS and Web. ```dart androidConfig: AndroidViewConfiguration( showSearchAction: true, showOutlineAction: true, showBookmarksAction: false, inlineSearch: true, enableDocumentEditor: false, darkThemeResource: 'MyApp_Dark', defaultThemeResource: 'MyApp_Light', ) ``` | Field | Type | Description | | ----------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------- | | [`appearanceMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/appearanceMode.html) | `AppearanceMode?` | Overrides the top-level [`appearanceMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/appearanceMode.html) on Android. | | [`thumbnailBarMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/thumbnailBarMode.html) | `ThumbnailBarMode?` | Overrides the top-level [`thumbnailBarMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/thumbnailBarMode.html) on Android. | | [`grayScale`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/grayScale.html) | `bool?` | Render the document in grayscale. | | [`showPageLabels`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showPageLabels.html) | `bool?` | Use named page labels (for example, “i,” “Cover”) instead of numeric indices. | | [`documentLabelEnabled`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/documentLabelEnabled.html) | `bool?` | Show the document title as an overlay at the top of the screen. | | [`inlineSearch`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/inlineSearch.html) | `bool?` | Show search as a compact inline bar instead of a full modal dialog. | | [`showActionNavigationButtons`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showActionNavigationButtons.html) | `bool?` | Show back and forward buttons for navigating previously visited pages. | | [`showSearchAction`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showSearchAction.html) | `bool?` | Show the search button in the toolbar. | | [`showOutlineAction`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showOutlineAction.html) | `bool?` | Show the outline (table of contents) button in the toolbar. | | [`showBookmarksAction`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showBookmarksAction.html) | `bool?` | Show the bookmarks button in the toolbar. | | [`showAnnotationListAction`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showAnnotationListAction.html) | `bool?` | Show a button that opens the annotation list. | | [`showThumbnailGridAction`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showThumbnailGridAction.html) | `bool?` | Show a button that opens the fullscreen thumbnail grid. | | [`showPrintAction`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/showPrintAction.html) | `bool?` | Show a print button in the toolbar overflow menu. | | [`enableDocumentEditor`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/enableDocumentEditor.html) | `bool?` | Enable page editing — insertion, deletion, reordering (requires Document Editor license). | | [`contentEditorEnabled`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/contentEditorEnabled.html) | `bool?` | Enable in-place text and image editing (requires Content Editor license). | | [`darkThemeResource`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/darkThemeResource.html) | `String?` | Name of the Android XML theme resource to apply in dark mode. | | [`defaultThemeResource`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/AndroidViewConfiguration/defaultThemeResource.html) | `String?` | Name of the Android XML theme resource to apply in light mode. | ## IOSViewConfiguration [`IOSViewConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration-class.html) holds options that only apply to the iOS platform. Pass it as [`NutrientViewConfiguration.iosConfig`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/iosConfig.html). It’s silently ignored on Android and Web. ```dart iosConfig: IOSViewConfiguration( spreadFitting: SpreadFitting.adaptive, leftBarButtonItems: ['closeButtonItem'], rightBarButtonItems: ['annotationButtonItem', 'searchButtonItem'], ) ``` | Field | Type | Description | | --------------------------------------------------------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`spreadFitting`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/spreadFitting.html) | `SpreadFitting?` | How a page spread is fit into the viewport: `fit` (letterbox), `fill` (crop to fill), or `adaptive` (SDK chooses per spread). | | [`thumbnailBarMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/thumbnailBarMode.html) | `ThumbnailBarMode?` | Overrides the top-level [`thumbnailBarMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/thumbnailBarMode.html) on iOS. | | [`showPageLabels`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/showPageLabels.html) | `bool?` | Use named page labels instead of numeric indices. | | [`documentLabelEnabled`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/documentLabelEnabled.html) | `bool?` | Show the document title overlay. | | [`inlineSearch`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/inlineSearch.html) | `bool?` | Show search as a compact inline bar instead of a modal sheet. | | [`showActionNavigationButtons`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/showActionNavigationButtons.html) | `bool?` | Show back and forward page navigation buttons. | | [`allowToolbarTitleChange`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/allowToolbarTitleChange.html) | `bool?` | Update the navigation bar title to the current page label while scrolling. | | [`bookmarkIndicatorMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/bookmarkIndicatorMode.html) | `IOSBookmarkIndicatorMode?` | When to show the bookmark icon on pages: `off`, `alwaysOn`, or `onWhenBookmarked`. | | [`bookmarkIndicatorInteractionEnabled`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/bookmarkIndicatorInteractionEnabled.html) | `bool?` | Enable tapping the bookmark indicator to toggle bookmarks. Only meaningful when [`bookmarkIndicatorMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/bookmarkIndicatorMode.html) isn’t `off`. | | [`leftBarButtonItems`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | `List?` | Replaces the default left navigation bar buttons. Pass an empty list to remove all buttons. | | [`rightBarButtonItems`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/rightBarButtonItems.html) | `List?` | Replaces the default right navigation bar buttons. Pass an empty list to remove all buttons. | ### Bar button item identifiers | Identifier | Description | | ------------------------------------------------ | ------------------------------------------ | | [`closeButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Close/dismiss. | | [`annotationButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens the annotation toolbar. | | [`searchButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens search. | | [`outlineButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens the outline/table of contents panel. | | [`bookmarkButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens the bookmarks panel. | | [`thumbnailsButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens the thumbnail grid. | | [`printButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens the print dialog. | | [`activityButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens the system share sheet. | | [`brightnessButtonItem`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/IOSViewConfiguration/leftBarButtonItems.html) | Opens brightness control. | ## WebViewConfiguration [`WebViewConfiguration`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration-class.html) holds options specific to the Web platform. It’s typed as `Object?` in the platform interface to avoid a circular package dependency — import it from `package:nutrient_flutter` and pass it as [`webConfig`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/NutrientViewConfiguration/webConfig.html). Common options include [`showToolbar`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/showToolbar.html), [`showAnnotations`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/showAnnotations.html), [`readOnly`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/readOnly.html), and [`theme`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/theme.html). ```dart import 'package:nutrient_flutter/nutrient_flutter.dart'; NutrientViewConfiguration( webConfig: WebViewConfiguration( showToolbar: true, showAnnotations: true, readOnly: false, theme: 'DARK', ), ) ``` ### Common WebViewConfiguration fields | Field | Type | Description | | -------------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------- | | [`showToolbar`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/showToolbar.html) | `bool?` | Show or hide the main toolbar. | | [`showAnnotations`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/showAnnotations.html) | `bool?` | Show or hide all annotations in the viewer. | | [`readOnly`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/readOnly.html) | `bool?` | Open in read-only mode (no annotation creation/editing). | | [`theme`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/theme.html) | `String?` | Viewer theme string, e.g. `DARK`, `LIGHT`, `AUTO`. | | [`enableAnnotationToolbar`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/enableAnnotationToolbar.html) | `bool?` | Show or hide the annotation toolbar. | | [`sidebarMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/sidebarMode.html) | `SidebarMode?` | Which sidebar panel is open initially (annotations, bookmarks, thumbnails, etc.). | | [`interactionMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/interactionMode.html) | `NutrientWebInteractionMode?` | Initial active tool/interaction mode on load. | | [`zoom`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/zoom.html) | `dynamic` (`num` or `ZoomMode`) | Initial zoom level. | | [`allowPrinting`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/allowPrinting.html) | `bool?` | Allow or block printing from the web viewer UI. | | [`disableTextSelection`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/disableTextSelection.html) | `bool?` | Disable text selection in the viewer. | | [`disableForms`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/disableForms.html) | `bool?` | Disable form field interaction. | | [`locale`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/locale.html) | `String?` | UI locale (BCP-47), e.g. `en`, `de`. | | [`toolbarItems`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/toolbarItems.html) | `List?` | Customize the main toolbar items. | | [`autoSaveMode`](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration/autoSaveMode.html) | `AutoSaveMode?` | Control auto-save behavior for web changes. | For advanced web-only options (callbacks, rendering hooks, performance toggles, and other low-level `NutrientViewer.load()` options), refer to the complete [`WebViewConfiguration` API reference](https://pub.dev/documentation/nutrient_flutter/latest/nutrient_flutter/WebViewConfiguration-class.html). --- ## Related pages - [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) - [Customizing our PDF viewer in Flutter](/guides/flutter/user-interface.md) - [Configuring PDF view properties](/guides/flutter/user-interface/configuration.md)