Getting started with Flutter PDF Viewer (SfPdfViewer)

18 Aug 202111 minutes to read

This section explains the steps required to add the SfPdfViewer widget and its features. This section covers only the basic features needed to get started with the Syncfusion Flutter PDF Viewer plugin.

Add the Flutter PDF Viewer to an application

Create a simple project using the instructions given in the Getting Started with your first Flutter app documentation.

Add dependency

Add the Syncfusion Flutter PDF Viewer dependency to your pubspec.yaml file.

  • dart
  • dependencies:
    
    syncfusion_flutter_pdfviewer: ^xx.x.xx

    NOTE

    Here xx.x.xx denotes the current version of the Syncfusion Flutter PDF Viewer package.

    For the web platform, we have used PdfJs for rendering the PDF pages, so the script file must be referred to in your web/index.html file.

    On your web/index.html file, add the following script tags, somewhere in the head or body of the document:

    <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
    <script type="text/javascript">
       pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js";
    </script>

    Get packages

    Run the following command to get the required packages.

  • dart
  • $ flutter pub get

    Import package

    Import the following package in your Dart code.

    import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

    Initialize the PDF Viewer

    Once the package has been imported, initialize the SfPdfViewer as a child of any widget. In the following shown examples, the SfPdfViewer widget is added as a child of the container widget. Several constructors are provided for the various ways that a PDF document can be loaded. They are,

    • Asset
    • Network
    • File
    • Memory

    NOTE

    Currently, we do not support viewing the password-protected PDF document.

    Load document from the Asset

    The SfPdfViewer.asset creates a widget that displays the PDF document obtained from an AssetBundle. The following code example explains the same.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: SfPdfViewer.asset(
                  'assets/flutter-succinctly.pdf')));
    }

    Load document from the Network

    The SfPdfViewer.network creates a widget that displays the PDF document obtained from a URL. The following code example explains the same.

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

    To load PDF from network using SfPdfViewer.network in macOS, network access must be enabled in your macOS application. On your macos/Runner/DebugProfile.entitlements file, add the following lines inside the <dict>
    tag to enable the network access in your application:

    <key>com.apple.security.network.client</key>
    <true/>

    Load document from the File

    The SfPdfViewer.file creates a widget that displays the PDF document obtained from a File. The following code example explains the same.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: SfPdfViewer.file(
                  File('storage/emulated/0/Download/flutter-succinctly.pdf'))));
    }

    NOTE

    On Android, this may require the android.permission.READ_EXTERNAL_STORAGE.

    Load document from the Memory

    The SfPdfViewer.memory creates a widget that displays the PDF document obtained from the Uint8List. The following code example explains the same.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: SfPdfViewer.memory(
                  bytes)));
    }

    Load document with the specified scroll offset position or zoom level

    The SfPdfViewer allows you to load the document with the specified scroll offset position or zoom level using the initialScrollOffset and initialZoomLevel properties. The following code example explains the same.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: SfPdfViewer.network(
                  'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
                  initialScrollOffset: Offset(0, 500),
                  initialZoomLevel: 1.5)));
    }

    Get the current scroll offset position

    The SfPdfViewer allows you to get the current scroll offset position using the scrollOffset property. The following code example explains the same.

    final PdfViewerController _pdfViewerController=PdfViewerController();
    
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Syncfusion Flutter PDF Viewer'),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.arrow_drop_down_circle,
                color: Colors.white,
              ),
              onPressed: () {
                _pdfViewerController.jumpToPage(3);
                print( _pdfViewerController.scrollOffset.dy);
                print( _pdfViewerController.scrollOffset.dx);
              },
            ),
          ],
        ),
        body: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          controller: _pdfViewerController,
        ),
      );
    }

    Customize the space being displayed between the PDF pages

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

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: 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.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: 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.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: 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.

    Callbacks

    The SfPdfViewer loading supports the PdfDocumentLoadedCallback and PdfDocumentLoadFailedCallback to notify whether the document has been loaded completely or not.

    Document loaded callback

    The onDocumentLoaded callback triggers after the document are loaded in the SfPdfViewer. The document in the PdfDocumentLoadedDetails will return the loaded PdfDocument instance. The following code example explains the same.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        onDocumentLoaded: (PdfDocumentLoadedDetails details) {
          print(details.document.pages.count);
        },
      )));
    }

    Document load failed callback

    The onDocumentLoadFailed callback triggers when the document loading fails in the SfPdfViewer. That is,

    • When any corrupted document is loaded.
    • When any password-protected document is loaded.
    • When any improper input source value like the wrong URL or file path is given.
    • When any non-PDF document is loaded.

    The PdfDocumentLoadFailedDetails will return the error title and description message for the failure reason. The following code example explains the same.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Container(
              child: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        onDocumentLoadFailed: (PdfDocumentLoadFailedDetails details) {
          AlertDialog(
            title: Text(details.error),
            content: Text(details.description),
            actions: <Widget>[
              FlatButton(
                child: Text('OK'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      )));
    }