diff --git a/Document-Processing/PDF/PDF-Viewer/flutter/getting-started.md b/Document-Processing/PDF/PDF-Viewer/flutter/getting-started.md index 43eb7a3167..cf724eda23 100644 --- a/Document-Processing/PDF/PDF-Viewer/flutter/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/flutter/getting-started.md @@ -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 @@ -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® 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® 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 %} @@ -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" %}