Flutter-docs/Flutter/pdf-viewer/getting-started.md

layout	title	description	platform	control	documentation
post	Getting started with Flutter PDF Viewer widget | Syncfusion	Learn here about getting started with Syncfusion Flutter PDF Viewer (SfPdfViewer) widget, its elements, and more.	Flutter	SfPdfViewer	ug

Getting started with Flutter PDF Viewer (SfPdfViewer)

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.

{% highlight dart %}

dependencies:

syncfusion_flutter_pdfviewer: ^xx.x.xx

{% endhighlight %}

N> 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.

{% highlight dart %}

$ flutter pub get

{% endhighlight %}

Import package

Import the following package in your Dart code.

{% tabs %} {% highlight Dart %}

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

{% endhighlight %} {% endtabs %}

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

N> 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.

{% tabs %} {% highlight Dart %}

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

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

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

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

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

{% endhighlight %} {% endtabs %}

N> 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.

{% tabs %} {% highlight Dart %}

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

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

@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))); }

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

final PdfViewerController _pdfViewerController=PdfViewerController();

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ 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, ), ); }

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

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

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

@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))); }

{% endhighlight %} {% endtabs %}

N> 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.

{% tabs %} {% highlight Dart %}

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

{% endhighlight %} {% endtabs %}

N> 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.

{% tabs %} {% highlight Dart %}

@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); }, ))); }

{% endhighlight %} {% endtabs %}

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.

{% tabs %} {% highlight Dart %}

@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: [ FlatButton( child: Text('OK'), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ))); }

{% endhighlight %} {% endtabs %}

N> 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.