Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 14 additions & 16 deletions Document-Processing/PDF/PDF-Viewer/flutter/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting started with Flutter PDF Viewer widget | Syncfusion
title: Getting Started with Flutter PDF Viewer Widget | Syncfusion
description: Learn here about getting started with Syncfusion® Flutter PDF Viewer (SfPdfViewer) widget, its elements, and more.
platform: document-processing
control: SfPdfViewer
Expand All @@ -18,34 +18,33 @@ To get started quickly, you can also check out our video tutorial below.
Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation.

## Install the Flutter PDF Viewer package
Install the [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_pdfviewer/versions) package to your project by run the following command in your project’s terminal:
Install the [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_pdfviewer/versions) package to your project by running the following command in your project’s terminal:

{% tabs %}
{% highlight yaml tabtitle="powershell" %}
{% highlight tabtitle="powershell" %}

flutter pub add syncfusion_flutter_pdfviewer

{% endhighlight %}
{% endtabs %}

## Specify the asset path
Add the asset path to your `pubspec.yaml` file under the flutter section.
## 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 `pubspec.yaml` file under the flutter section.

{% tabs %}
{% highlight yaml tabtitle="pubspec.yaml" %}

flutter:

assets:
   - assets/
assets:
   - assets/

{% endhighlight %}
{% endtabs %}

## Add the script tags
For the web platform, we have used [PdfJs](https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js) for rendering the PDF pages, so the script file must be referred to in your `web/index.html` file.
## Add Script Tags
For the web platform, we have used [PdfJs](https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js) 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, somewhere in the `head` or `body` of the document:
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:
{% tabs %}
Expand All @@ -71,23 +70,22 @@ For PdfJs library versions below 4.0:
{% endhighlight %}
{% endtabs %}

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

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

## Import Package

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

{% tabs %}
{% highlight Dart %}
{% highlight dart %}

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

{% endhighlight %}
{% endtabs %}

## 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
## 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html).

{% tabs %}
{% highlight dart hl_lines="4" %}
Expand Down