Page layout and Scrolling options in Flutter PDF Viewer (SfPdfViewer)

19 Jan 20242 minutes to read

Page layout modes describe how the PDF page is displayed and, scrolling options describe the direction in which the PDF pages can be scrolled in SfPdfViewer.

Page layout modes

The SfPdfViewer supports the following page layout modes:

• Continuous page layout mode
• Single page layout mode

Continuous page layout mode

By default, the continuous page layout mode is enabled, which scrolls the PDF pages vertically and horizontally. To enable the continuous page layout mode in SfPdfViewer, use the following code sample.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
      body:SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
              pageLayoutMode: PdfPageLayoutMode.continuous));
}

Single page layout mode

In Single page layout mode, PDFs will be displayed page by page horizontally. To enable the Single page layout mode in SfPdfViewer, use the following code sample.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
      body:SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
              pageLayoutMode: PdfPageLayoutMode.single));
}

Scrolling options

The SfPdfViewer supports the following scrolling options:

• Vertical scrolling
• Horizontal scrolling

If the scroll direction is not specified, continuous page layout mode defaults to vertical scrolling, and single page layout mode defaults to horizontal scrolling.

Vertical scrolling

By default, Vertical scrolling is enabled, which moves the PDF pages from up to down. To enable the Vertical scrolling in SfPdfViewer, use the following code sample.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
      body:SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
              scrollDirection: PdfScrollDirection.vertical));
}

Horizontal scrolling

In Horizontal scrolling, PDF pages can be scrolled from left to right. To enable the Horizontal scrolling in SfPdfViewer, use the following code sample.

DART

@override
Widget build(BuildContext context) {
  return Scaffold(
      body:SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
              scrollDirection: PdfScrollDirection.horizontal));
}