UI Customization in Flutter PDF Viewer (SfPdfViewer)

10 Jul 20263 minutes to read

This section walks you through the UI customization options supported in the SfPdfViewer widget.

Prerequisites

To use the SfPdfViewer widget, add the syncfusion_flutter_pdfviewer package to your pubspec.yaml file and import it in your code:

DART

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

Customize the Space Displayed Between the PDF Pages

By default, the SfPdfViewer displays spacing between the PDF pages with a value of 4 pixels. You can customize the space displayed using the pageSpacing property. The following code example explains the same.

DART

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

Customize the Visibility of Scroll Head and Scroll Status

By default, the SfPdfViewer displays the scroll head and scroll status. You can customize the visibility of these items using the canShowScrollHead and canShowScrollStatus properties. The following code example explains the same.

DART

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

NOTE

On a desktop or mobile web browser, this canShowScrollHead property will have no effect since the scroll head will not be displayed there.

Customize the Visibility of Page Navigation Dialog

By default, the page navigation dialog will be displayed when the scroll head is tapped. You can customize the visibility of the page navigation dialog using the canShowPaginationDialog property. The following code example explains the same.

DART

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

NOTE

On a desktop or mobile web browser, this canShowPaginationDialog property will have no effect since the pagination dialog will not be displayed there.

Customize the Visibility of Page Loading Busy Indicator

By default, the SfPdfViewer displays the page loading busy indicator. You can customize the visibility of this using the canShowPageLoadingIndicator property. The following code example explains the same.

DART

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