Syncfusion AI Assistant

How can I help you?

Getting Started with Flutter PDF Viewer (SfPdfViewer)

22 Jun 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 run the following command in your project’s terminal:

flutter pub add syncfusion_flutter_pdfviewer

Specify the asset path

Add the asset path to your pubspec.yaml file under the flutter section.

flutter:

assets:
   - assets/

Add the script tags

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.

In 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

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

Import 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 feature representations. You can also explore our Flutter PDF Viewer example, which shows you how to render and configure the PDF Viewer.

See Also