Getting started with Flutter PDF Viewer (SfPdfViewer)

13 Mar 20252 minutes to read

This section explains the steps to add the SfPdfViewer widget to your Flutter application and load a PDF document.

To get started quickly, you can also check out our video tutorial below.

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:

    For PdfJs library version 4.0 and above

    <script type="module" async>
  import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.min.mjs';
  pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.worker.min.mjs";
</script>

    For PdfJs library versions below 4.0

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

    NOTE

    Version above 2.11.338 is recommended for using annotation support. This will not flatten the unsupported annotations while rendering the pages.

    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, add the SfPdfViewer widget as a child of any widget. In the following shown examples, the SfPdfViewer widget is added as a child of the Scaffold widget.

    Load document

    To display a PDF document in the PDF Viewer, add the PDF document to the application assets and use SfPdfViewer.asset to load it from the AssetBundle. The following code example explains the same.

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

    NOTE

    You can refer to our Flutter PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore our Flutter PDF Viewer example that shows you how to render and configure the PDF Viewer.