Getting Started with Flutter PDF Viewer (SfPdfViewer)

21 Jul 20262 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.

Create Flutter Application

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

Install the Flutter PDF Viewer package

Install the Syncfusion® Flutter PDF Viewer package to your project by running the following command in your project’s terminal:

flutter pub add syncfusion_flutter_pdfviewer

Specify Asset Path

Create an assets folder in the project root, add a sample PDF file (for example, flutter-succinctly.pdf) to it, and specify the asset path in the pubspec.yaml file under the flutter section.

flutter:
  assets:
    - assets/

Add Script Tags

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

In your web/index.html file, add the following script tags, in the 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

A version above 2.11.338 is recommended for using annotation support. Unsupported annotations are preserved rather than flattened during rendering.

Import the Package

In the main.dart file, import the required package.

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

Add the SfPdfViewer Widget and Load Document

In the main.dart file, replace the build method with the following code to display the PDF using SfPdfViewer.

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

NOTE

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

See Also