Configuring Scroll Direction and Page Transitions in Our Flutter Viewer

You can programmatically configure the page transition, scroll direction, and scroll mode of a PSPDFKitView 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.

// First copy the document from assets to the temporary directory.
PdfConfiguration(
    pageTransition: PspdfkitPageTransition.scrollPerSpread , // Set the `scrollPerSpread` page transition.
    scrollDirection: PspdfkitScrollDirection.vertical, // Can also be `horizontal`.
    pageLayoutMode: PspdfkitPageLayoutMode.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.

// First copy the document from assets to the temporary directory.
PdfConfiguration(
    pageTransition: PspdfkitPageTransition.scrollContinuous, // Set the `scrollContinuous` page transition.
    scrollDirection: PspdfkitScrollDirection.vertical, // Can also be `horizontal`.
    pageLayoutMode: PspdfkitPageLayoutMode.single // Can also be `double` or `automatic` for vertical scroll direction.
);

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:

// First copy the document from assets to the temporary directory.
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'
    ]
);