---
title: "Configure Flutter viewer scroll direction & page transition | Nutrient"
canonical_url: "https://www.nutrient.io/guides/flutter/viewer/page-transition/"
md_url: "https://www.nutrient.io/guides/flutter/viewer/page-transition.md"
last_updated: "2026-06-08T17:11:05.529Z"
description: "You can programmatically configure the page transition, scroll direction, and scroll mode of a NutrientView in its configuration dictionary."
---

# Configuring scroll direction and page transitions in our Flutter viewer

You can programmatically configure the page transition, scroll direction, and scroll mode of a `NutrientView` in its `configuration` dictionary.

You need to be aware of the constraints outlined below when using these configuration properties (`pageTransition`, `scrollDirection`, and `pageMode`) simultaneously.

#### Scroll per spread page transition

If you’re using a scroll per spread page transition (also called jump), there are no constraints:

- The page scroll direction can be either `horizontal` or `vertical`.

- If the vertical scroll direction is used, the `pageMode` property can be `single`, `double`, or `automatic`.

```dart

PdfConfiguration(
    pageTransition: PageTransition.scrollPerSpread , // Set the `scrollPerSpread` page transition.
    scrollDirection: ScrollDirection.vertical, // Can also be `horizontal`.
    pageLayoutMode: PageLayoutMode.single // Can also be `double` or `automatic`.
);

```

#### Scroll continuous page transition

If you’re using a scroll continuous page transition:

- The page scroll direction can be either `horizontal` or `vertical`.

- If the vertical scroll direction is used, the `pageMode` property can be `single`, `double`, or `automatic`. It’ll be forced to `single` if the horizontal scroll direction is used.

```dart

PdfConfiguration(
    pageTransition: PageTransition.scrollContinuous, // Set the `scrollContinuous` page transition.
    scrollDirection: ScrollDirection.vertical, // Can also be `horizontal`.
);

```

### User interface

| Android                                                                                         | iOS                                                                                                   |
| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|  |  |

To show the page transition buttons in the user interface, you can use the setting menu items property in the configuration. Here’s how to do this:

```dart

PdfConfiguration(
    // For iOS, first show the settings button item.
    iOSRightBarButtonItems: ['settingsButtonItem'],
    // Then configure the settings menu items.
    settingsMenuItems: [
        'pageTransition',
        'scrollDirection',
        'androidTheme',
        'iOSAppearance',
        'androidPageLayout',
        'iOSPageMode',
        'iOSSpreadFitting',
        'androidScreenAwake',
        'iOSBrightness'
    ]
);

```

---

## Related pages

- [Coordinate conversion in the Flutter PDF viewer](/guides/flutter/viewer/coordinate-conversion.md)
- [Customizing page navigation in our Flutter PDF viewer](/guides/flutter/viewer/page-navigation.md)
- [Flutter image viewer library](/guides/flutter/viewer/images.md)
- [Get page information in Nutrient Flutter SDK PDF viewer](/guides/flutter/viewer/page-info.md)
- [Nutrient Flutter SDK web PDF viewer](/guides/flutter/viewer/web.md)
- [Flutter PDF viewer library](/guides/flutter/viewer.md)
- [Optimize PDF reading with reader view for iOS](/guides/flutter/viewer/reader-view.md)
- [Customizing zoom options in our Flutter PDF viewer](/guides/flutter/viewer/zooming.md)