From 1001995332f156b58bdf02b0ec4fe33ce91d1cb7 Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Wed, 5 Jun 2024 17:57:46 +0530 Subject: [PATCH 1/7] FLUT-889763-[documentation][flutter]: Revamp the Flutter PDF viewer UG --- Flutter/pdf-viewer/getting-started.md | 351 +++--------------- Flutter/pdf-viewer/load-document-events.md | 80 ++++ .../open-a-document-from-local-storage.md | 26 ++ .../pdf-viewer/open-a-document-from-memory.md | 24 ++ .../pdf-viewer/open-a-document-from-url.md | 41 ++ .../open-a-document-password-protected.md | 267 +++++++++++++ Flutter/pdf-viewer/open-a-document.md | 21 ++ Flutter/pdf-viewer/ui-customization.md | 88 +++++ 8 files changed, 592 insertions(+), 306 deletions(-) create mode 100644 Flutter/pdf-viewer/load-document-events.md create mode 100644 Flutter/pdf-viewer/open-a-document-from-local-storage.md create mode 100644 Flutter/pdf-viewer/open-a-document-from-memory.md create mode 100644 Flutter/pdf-viewer/open-a-document-from-url.md create mode 100644 Flutter/pdf-viewer/open-a-document-password-protected.md create mode 100644 Flutter/pdf-viewer/open-a-document.md create mode 100644 Flutter/pdf-viewer/ui-customization.md diff --git a/Flutter/pdf-viewer/getting-started.md b/Flutter/pdf-viewer/getting-started.md index 316439f8b..3e3eebcc0 100644 --- a/Flutter/pdf-viewer/getting-started.md +++ b/Flutter/pdf-viewer/getting-started.md @@ -64,324 +64,63 @@ import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart'; {% endhighlight %} {% endtabs %} -## Initialize the PDF Viewer +**Load Document** -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 - -### Load document from the Asset +Once the package has been imported, initialize the `SfPdfViewer` as a child of any widget. In the following shown example, the `SfPdfViewer` widget is added as a child of the container widget. The [SfPdfViewer.asset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.asset.html) creates a widget that displays the PDF document obtained from an [`AssetBundle`](https://api.flutter.dev/flutter/services/AssetBundle-class.html). The following code example explains the same. {% tabs %} -{% highlight dart hl_lines="4 5" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.asset( - 'assets/flutter-succinctly.pdf')); -} - -{% endhighlight %} -{% endtabs %} - -### Load document from the Network - -The [SfPdfViewer.network](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.network.html) creates a widget that displays the PDF document obtained from a URL. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="4 5" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf')); -} - -{% endhighlight %} -{% endtabs %} - -To load PDF from network using [SfPdfViewer.network](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.network.html) in macOS, network access must be enabled in your macOS application. On your `macos/Runner/DebugProfile.entitlements` file, add the following lines inside the `` -tag to enable the network access in your application: - -```html -com.apple.security.network.client - -``` - -N> Due to CORS security restrictions in a web application, some PDFs obtained from URLs might not be loaded in the `SfPdfViewer` web platform. Kindly refer to the flutter [forum](https://github.com/flutter/flutter/issues/51125) reported on the same. - -This issue can be resolved by configuring the CORS settings in the requested server or by disabling the security settings in **chrome.dart** as mentioned in the below steps: - -1. Go to **flutter\bin\cache** and remove a file named: **flutter_tools.stamp** -2. Go to **flutter\packages\flutter_tools\lib\src\web** and open the file **chrome.dart**. -3. Find **'--disable-extensions'**. -4. Add **'--disable-web-security'**. - -### Load document from the File - -The [SfPdfViewer.file](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.file.html) creates a widget that displays the PDF document obtained from a [`File`](https://api.flutter.dev/flutter/dart-io/File-class.html). The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="4 5" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.file( - File('storage/emulated/0/Download/flutter-succinctly.pdf'))); -} +{% highlight dart hl_lines="43 44" %} -{% endhighlight %} -{% endtabs %} - -N> The file path mentioned in the above code example is just for the Android platform. On Android, this may require the `android.permission.READ_EXTERNAL_STORAGE`. - -### Load document from the Memory - -The [SfPdfViewer.memory](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.memory.html) creates a widget that displays the PDF document obtained from the [`Uint8List`](https://api.flutter.dev/flutter/dart-typed_data/Uint8List-class.html). The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="4 5" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.memory( - bytes)); -} - -{% endhighlight %} -{% endtabs %} - -## Load the document with the specified page - -The `SfPdfViewer` allows you to load the document with the specified page using the `initialPageNumber` property. The following code example explains the same. +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart'; -{% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', - initialPageNumber: 5)); +void main() { + runApp(MaterialApp( + title: 'Syncfusion PDF Viewer Demo', + home: HomePage(), + )); } -{% endhighlight %} -{% endtabs %} - -N> It is recommended not to use both the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) and `initialPageNumber` properties at the same time. If both properties are defined, the `initialPageNumber` will be prioritized over the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) - -## 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) and [initialZoomLevel](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialZoomLevel.html) properties. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="6 7" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', - initialScrollOffset: Offset(0, 500), - initialZoomLevel: 1.5)); +/// Represents Homepage for Navigation +class HomePage extends StatefulWidget { + @override + _HomePage createState() => _HomePage(); } -{% endhighlight %} -{% endtabs %} - -## Get the current scroll offset position - -The `SfPdfViewer` allows you to get the current scroll offset position using the [scrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/scrollOffset.html) property. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="16 17" %} - -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, +class _HomePage extends State { + final GlobalKey _pdfViewerKey = GlobalKey(); + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('Syncfusion Flutter PDF Viewer'), + actions: [ + IconButton( + icon: const Icon( + Icons.bookmark, + color: Colors.white, + semanticLabel: 'Bookmark', + ), + onPressed: () { + _pdfViewerKey.currentState?.openBookmarkView(); + }, ), - 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/pageSpacing.html) property. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowScrollHead.html) and [canShowScrollStatus](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowScrollStatus.html) properties. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="6 7" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPaginationDialog.html) property. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: 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. - -## Customize the visibility of page loading busy indicator - -By default, the `SfPdfViewer` displays the page loading busy indicator. You can customize the visibility of this using the [canShowPageLoadingIndicator](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPageLoadingIndicator.html) property. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="6" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', - canShowPageLoadingIndicator: false)); -} - -{% endhighlight %} -{% endtabs %} - -## Callbacks - -The `SfPdfViewer` loading supports the [PdfDocumentLoadedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadedCallback.html) and [PdfDocumentLoadFailedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadFailedCallback.html) to notify whether the document has been loaded completely or not. - -### Document loaded callback - -The [onDocumentLoaded](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoaded.html) callback triggers after the `document` are loaded in the `SfPdfViewer`. The document in the [PdfDocumentLoadedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadedDetails-class.html) will return the loaded [PdfDocument](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) instance. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="6 7 8" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoadFailed.html) 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 with invalid or empty password. -* When any improper input source value like the wrong URL or file path is given. -* When any non-PDF document is loaded. - -The [PdfDocumentLoadFailedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadFailedDetails-class.html) will return the `error` title and `description` message for the failure reason. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="26 27 28" %} - - /// Displays the error message. - void showErrorDialog(BuildContext context, String error, String description) { - showDialog( - context: context, - builder: (BuildContext context) { - return AlertDialog( - title: Text(error), - content: Text(description), - actions: [ - TextButton( - child: const Text('OK'), - onPressed: () { - Navigator.of(context).pop(); - }, - ), - ], - ); - }); - } - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', - onDocumentLoadFailed: (PdfDocumentLoadFailedDetails details) { - showErrorDialog(context, details.error, details.description); - }, - )); + ], + ), + body: SfPdfViewer.asset( + 'flutter-succinctly.pdf', + key: _pdfViewerKey, + ), + ); + } } {% endhighlight %} diff --git a/Flutter/pdf-viewer/load-document-events.md b/Flutter/pdf-viewer/load-document-events.md new file mode 100644 index 000000000..56519fcde --- /dev/null +++ b/Flutter/pdf-viewer/load-document-events.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Document Load Events in Flutter PDF Viewer (SfPdfViewer) | Syncfusion +description: Learn here all about events that notifies whether the document has been loaded or failed to get loaded in the Syncfusion Flutter PDF Viewer (SfPdfViewer). +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# Document Load Events in Flutter PDF Viewer (SfPdfViewer) +The `SfPdfViewer` loading supports the [PdfDocumentLoadedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadedCallback.html) and [PdfDocumentLoadFailedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadFailedCallback.html) to notify whether the document has been loaded completely or not. + +### Document loaded callback + +The [onDocumentLoaded](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoaded.html) callback triggers after the `document` are loaded in the `SfPdfViewer`. The document in the [PdfDocumentLoadedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadedDetails-class.html) will return the loaded [PdfDocument](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) instance. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6 7 8" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoadFailed.html) 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 with invalid or empty password. +* When any improper input source value like the wrong URL or file path is given. +* When any non-PDF document is loaded. + +The [PdfDocumentLoadFailedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadFailedDetails-class.html) will return the `error` title and `description` message for the failure reason. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="26 27 28" %} + + /// Displays the error message. + void showErrorDialog(BuildContext context, String error, String description) { + showDialog( + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: Text(error), + content: Text(description), + actions: [ + TextButton( + child: const Text('OK'), + onPressed: () { + Navigator.of(context).pop(); + }, + ), + ], + ); + }); + } + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', + onDocumentLoadFailed: (PdfDocumentLoadFailedDetails details) { + showErrorDialog(context, details.error, details.description); + }, + )); +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Flutter/pdf-viewer/open-a-document-from-local-storage.md b/Flutter/pdf-viewer/open-a-document-from-local-storage.md new file mode 100644 index 000000000..87b07af24 --- /dev/null +++ b/Flutter/pdf-viewer/open-a-document-from-local-storage.md @@ -0,0 +1,26 @@ +--- +layout: post +title: Open a PDF From Local Storage in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion +description: Learn here about opening a PDF document from local storage in Syncfusion Flutter PDF Viewer widget (SfPdfViewer). +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# Open a PDF From Local Storage in Flutter PDF Viewer (SfPdfViewer) +The [SfPdfViewer.file](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.file.html) creates a widget that displays the PDF document obtained from a [`File`](https://api.flutter.dev/flutter/dart-io/File-class.html). The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="4 5" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.file( + File('storage/emulated/0/Download/flutter-succinctly.pdf'))); +} + +{% endhighlight %} +{% endtabs %} + +N> The file path mentioned in the above code example is just for the Android platform. On Android, this may require the `android.permission.READ_EXTERNAL_STORAGE`. \ No newline at end of file diff --git a/Flutter/pdf-viewer/open-a-document-from-memory.md b/Flutter/pdf-viewer/open-a-document-from-memory.md new file mode 100644 index 000000000..0addaa717 --- /dev/null +++ b/Flutter/pdf-viewer/open-a-document-from-memory.md @@ -0,0 +1,24 @@ +--- +layout: post +title: Open a Document From Memory in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion +description: Learn here about opening a PDF document from memory in Syncfusion Flutter PDF Viewer widget (SfPdfViewer). +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# Open a Document From Memory in Flutter PDF Viewer (SfPdfViewer) +The [SfPdfViewer.memory](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.memory.html) creates a widget that displays the PDF document obtained from the [`Uint8List`](https://api.flutter.dev/flutter/dart-typed_data/Uint8List-class.html). The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="4 5" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.memory( + bytes)); +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Flutter/pdf-viewer/open-a-document-from-url.md b/Flutter/pdf-viewer/open-a-document-from-url.md new file mode 100644 index 000000000..0c5a2fb1e --- /dev/null +++ b/Flutter/pdf-viewer/open-a-document-from-url.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Open a Document From URL in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion +description: Learn here about opening a PDF document from URL in Syncfusion Flutter PDF Viewer widget (SfPdfViewer). +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# Open a Document From URL in Flutter PDF Viewer (SfPdfViewer) +The [SfPdfViewer.network](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.network.html) creates a widget that displays the PDF document obtained from a URL. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="4 5" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf')); +} + +{% endhighlight %} +{% endtabs %} + +To load PDF from network using [SfPdfViewer.network](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.network.html) in macOS, network access must be enabled in your macOS application. On your `macos/Runner/DebugProfile.entitlements` file, add the following lines inside the `` +tag to enable the network access in your application: + +```html +com.apple.security.network.client + +``` + +N> Due to CORS security restrictions in a web application, some PDFs obtained from URLs might not be loaded in the `SfPdfViewer` web platform. Kindly refer to the flutter [forum](https://github.com/flutter/flutter/issues/51125) reported on the same. + +This issue can be resolved by configuring the CORS settings in the requested server or by disabling the security settings in **chrome.dart** as mentioned in the below steps: + +1. Go to **flutter\bin\cache** and remove a file named: **flutter_tools.stamp** +2. Go to **flutter\packages\flutter_tools\lib\src\web** and open the file **chrome.dart**. +3. Find **'--disable-extensions'**. +4. Add **'--disable-web-security'**. \ No newline at end of file diff --git a/Flutter/pdf-viewer/open-a-document-password-protected.md b/Flutter/pdf-viewer/open-a-document-password-protected.md new file mode 100644 index 000000000..9615d0686 --- /dev/null +++ b/Flutter/pdf-viewer/open-a-document-password-protected.md @@ -0,0 +1,267 @@ +--- +layout: post +title: Open a Password-Protected PDF in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion +description: Learn here about opening a password-protected document in Syncfusion Flutter PDF Viewer widget and more. +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# Open a Password-Protected PDF in Flutter PDF Viewer (SfPdfViewer) +To load a password-protected document without a password or with an invalid password in [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) using the [password](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/password.html) property. The default password dialog will be displayed. + +![Password dialog](images/password-dialog/password-dialog.png) + +## Customize the visibility of password dialog + +The password-protected document can be loaded by providing the password in the [password](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/password.html) property of SfPdfViewer. The [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property allows the user to customize the password dialog visibility. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="7 8" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: Container( + child: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf', + password:'syncfusion', + canShowPasswordDialog: false,))); +} + +{% endhighlight %} +{% endtabs %} + +## How to create and display a Customized Password Dialog? + +The `SfPdfViewer` library allows you to create and display a customized password dialog. The following code example explains the same. +In this example, We have disabled the built-in password dialog by setting the false to the [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property and creating the customized password dialog with the [AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html) widget. Whenever the `password` is empty or incorrect, the [onDocumentLoadFailed](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoadFailed.html) callback is triggered, used this callback to display the customized password dialog. + +{% tabs %} +{% highlight Dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart'; +import 'package:flutter/foundation.dart'; + +void main() { + runApp(const MaterialApp(home: CustomPasswordDialog())); +} + +class CustomPasswordDialog extends StatefulWidget { + const CustomPasswordDialog({Key? key}) : super(key: key); + + @override + _CustomPasswordDialogState createState() => _CustomPasswordDialogState(); +} + +class _CustomPasswordDialogState extends State { + String? _password; + final GlobalKey _formKey = GlobalKey(); + final TextEditingController _textFieldController = TextEditingController(); + final FocusNode _passwordDialogFocusNode = FocusNode(); + bool _hasPasswordDialog = false; + String _errorText = ''; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('Custom password dialog'), + toolbarHeight: 56, + ), + body: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf', + canShowPasswordDialog: false, + password: _password, + onDocumentLoaded: (details) { + if (_hasPasswordDialog) { + Navigator.pop(context); + _hasPasswordDialog = false; + _passwordDialogFocusNode.unfocus(); + _textFieldController.clear(); + } + }, + onDocumentLoadFailed: (details) { + if (details.description.contains('password')) { + if (details.description.contains('password') && + _hasPasswordDialog) { + _errorText = "Invalid password !!"; + _formKey.currentState?.validate(); + _textFieldController.clear(); + _passwordDialogFocusNode.requestFocus(); + } else { + _errorText = ''; + /// Creating custom password dialog. + _showCustomPasswordDialog(); + _passwordDialogFocusNode.requestFocus(); + _hasPasswordDialog = true; + } + } + }, + ), + ); + } + + /// Show the customized password dialog + Future _showCustomPasswordDialog() async { + return showDialog( + context: context, + builder: (BuildContext context) { + final Orientation orientation = kIsWeb + ? Orientation.portrait + : MediaQuery.of(context).orientation; + return AlertDialog( + scrollable: true, + insetPadding: EdgeInsets.zero, + contentPadding: orientation == Orientation.portrait + ? const EdgeInsets.all(24) + : const EdgeInsets.only(top: 0, right: 24, left: 24, bottom: 0), + buttonPadding: orientation == Orientation.portrait + ? const EdgeInsets.all(8) + : const EdgeInsets.all(4), + title: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Password required', + style: TextStyle( + fontFamily: 'Roboto', + fontSize: 20, + fontWeight: FontWeight.w500, + color: Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.87), + ), + ), + SizedBox( + height: 36, + width: 36, + child: RawMaterialButton( + onPressed: () { + _closePasswordDialog(); + }, + child: Icon( + Icons.clear, + color: Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.6), + size: 24, + ), + ), + ), + ], + ), + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(4.0))), + content: SingleChildScrollView( + child: SizedBox( + width: 326, + child: Column(children: [ + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 30), + child: Text( + 'The document is password protected. Please enter a password.', + style: TextStyle( + fontFamily: 'Roboto', + fontSize: 16, + fontWeight: FontWeight.w400, + color: Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.6), + ), + ), + ), + ), + Form( + child: TextFormField( + key: _formKey, + controller: _textFieldController, + focusNode: _passwordDialogFocusNode, + obscureText: true, + decoration: const InputDecoration( + hintText: 'Password hint: syncfusion', + border: OutlineInputBorder( + borderSide: BorderSide(color: Colors.blue)), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Colors.blue))), + obscuringCharacter: '#', + onFieldSubmitted: (value) { + _handlePasswordValidation(value); + }, + validator: (value) { + if (_errorText.isNotEmpty) { + return _errorText; + } + return null; + }, + onChanged: (value) { + _formKey.currentState?.validate(); + _errorText = ''; + }, + ), + ) + ]))), + actions: [ + TextButton( + onPressed: () { + _handlePasswordValidation(_textFieldController.text); + }, + child: Text( + 'OK', + style: TextStyle( + fontFamily: 'Roboto', + fontSize: 14, + fontWeight: FontWeight.w500, + color: Theme.of(context).colorScheme.primary, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), + child: TextButton( + onPressed: () { + _closePasswordDialog(); + }, + child: Text( + 'CANCEL', + style: TextStyle( + fontFamily: 'Roboto', + fontSize: 14, + fontWeight: FontWeight.w500, + color: Theme.of(context).colorScheme.primary, + ), + ), + ), + ) + ], + ); + }); + } + + ///Close the password dialog + void _closePasswordDialog() { + Navigator.pop(context, 'Cancel'); + _hasPasswordDialog = false; + _passwordDialogFocusNode.unfocus(); + _textFieldController.clear(); + } + + /// Validates the password entered in text field. + void _handlePasswordValidation(String value) { + setState(() { + _password = value; + _passwordDialogFocusNode.requestFocus(); + }); + } +} + +{% endhighlight %} +{% endtabs %} + +![Custom Password dialog](images/password-dialog/custompassword-dialog.png) diff --git a/Flutter/pdf-viewer/open-a-document.md b/Flutter/pdf-viewer/open-a-document.md new file mode 100644 index 000000000..6620d4fa6 --- /dev/null +++ b/Flutter/pdf-viewer/open-a-document.md @@ -0,0 +1,21 @@ +--- +layout: post +title: Open a Document in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion +description: Learn here all about opening a PDF document in Syncfusion Flutter PDF Viewer (SfPdfViewer) and more. +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# Open a Document in Flutter PDF Viewer (SfPdfViewer) +The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to open PDF documents from various sources, like local storage, memory or URLs using respective constructors. It also lets you view password-protected documents. + +This section walks you through the loading of documents in `SfPdfViewer` and handling the load-specific events. + +## Supported constructor types + +The `SfPdfViewer` supports the following constructor types. +1. Asset +2. Network +3. Memory +4. File \ No newline at end of file diff --git a/Flutter/pdf-viewer/ui-customization.md b/Flutter/pdf-viewer/ui-customization.md new file mode 100644 index 000000000..cb318d2f2 --- /dev/null +++ b/Flutter/pdf-viewer/ui-customization.md @@ -0,0 +1,88 @@ +--- +layout: post +title: UI Customization in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion +description: Learn here all about the UI customization options in Syncfusion Flutter PDF Viewer widget (SfPdfViewer) and more. +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# UI Customization in Flutter PDF Viewer (SfPdfViewer) +This section walks you through the UI customization options supported in the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html). + +## 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/pageSpacing.html) property. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowScrollHead.html) and [canShowScrollStatus](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowScrollStatus.html) properties. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6 7" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPaginationDialog.html) property. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: 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. + +## Customize the visibility of page loading busy indicator + +By default, the `SfPdfViewer` displays the page loading busy indicator. You can customize the visibility of this using the [canShowPageLoadingIndicator](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPageLoadingIndicator.html) property. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', + canShowPageLoadingIndicator: false)); +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file From 8516e30c4b3f53b1fd1ceaecea011c98b1a07510 Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Thu, 6 Jun 2024 15:58:15 +0530 Subject: [PATCH 2/7] FLUT-889763-[documentation][flutter]: Resolve spell check error. --- Flutter/pdf-viewer/open-a-document-from-url.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Flutter/pdf-viewer/open-a-document-from-url.md b/Flutter/pdf-viewer/open-a-document-from-url.md index 0c5a2fb1e..69dc0160f 100644 --- a/Flutter/pdf-viewer/open-a-document-from-url.md +++ b/Flutter/pdf-viewer/open-a-document-from-url.md @@ -23,7 +23,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -To load PDF from network using [SfPdfViewer.network](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.network.html) in macOS, network access must be enabled in your macOS application. On your `macos/Runner/DebugProfile.entitlements` file, add the following lines inside the `` +To load PDF from network using [SfPdfViewer.network](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.network.html) in mac OS, network access must be enabled in your mac OS application. On your `macos/Runner/DebugProfile.entitlements` file, add the following lines inside the `` tag to enable the network access in your application: ```html From 563a47a744cf6782bec48c976c8eb8685ce3c1d3 Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Thu, 6 Jun 2024 18:30:59 +0530 Subject: [PATCH 3/7] FLUT-889763-[documentation][flutter]: Adding links to the APIs --- .../add-remove-modify-annotations.md | 12 +- Flutter/pdf-viewer/annotation-collection.md | 2 +- Flutter/pdf-viewer/annotations-overview.md | 4 +- Flutter/pdf-viewer/form-filling.md | 10 +- Flutter/pdf-viewer/load-page-programmatically | 76 +++++ Flutter/pdf-viewer/lock-unlock-annotations.md | 16 +- Flutter/pdf-viewer/magnification.md | 4 +- .../open-a-document-password-protected.md | 267 ------------------ .../page-layout-and-scroll-direction.md | 17 ++ Flutter/pdf-viewer/page-navigation.md | 2 +- .../pdf-viewer/select-deselect-annotations.md | 12 +- Flutter/pdf-viewer/text-markup.md | 4 +- Flutter/pdf-viewer/text-selection.md | 2 +- Flutter/pdf-viewer/undo-redo.md | 2 +- .../viewing-password-protected-pdf-files.md | 18 +- 15 files changed, 137 insertions(+), 311 deletions(-) create mode 100644 Flutter/pdf-viewer/load-page-programmatically delete mode 100644 Flutter/pdf-viewer/open-a-document-password-protected.md diff --git a/Flutter/pdf-viewer/add-remove-modify-annotations.md b/Flutter/pdf-viewer/add-remove-modify-annotations.md index aaf528388..55598754f 100644 --- a/Flutter/pdf-viewer/add-remove-modify-annotations.md +++ b/Flutter/pdf-viewer/add-remove-modify-annotations.md @@ -9,7 +9,7 @@ documentation: ug # Add, Remove, Edit Annotations in Flutter PDF Viewer widget (Syncfusion) -This section will go through the various functions available in the `SfPdfViewer` for adding, removing, and editing annotations in a PDF document. +This section will go through the various functions available in the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) for adding, removing, and editing annotations in a PDF document. ## Add annotations to a PDF document @@ -17,7 +17,7 @@ This section will go through how to add annotations to a PDF document programmat ### Add annotations programmatically -You can programmatically add a new annotation to the PDF document by creating an annotation instance and providing it as a parameter to the `addAnnotation` method of the `PdfViewerController` class. The following example shows how to create an instance of a highlight annotation and add it to the PDF document. Similarly, you can create and add other types of annotation. +You can programmatically add a new annotation to the PDF document by creating an annotation instance and providing it as a parameter to the [addAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/search.html?q=addAnnotation) method of the [PdfViewerController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController-class.html) class. The following example shows how to create an instance of a highlight annotation and add it to the PDF document. Similarly, you can create and add other types of annotation. {% tabs %} {% highlight dart hl_lines="11" %} @@ -41,7 +41,7 @@ void addHighlightAnnotation() { ### Annotation added callback -The callback provided to the `onAnnotationAdded` property is triggered when an annotation is successfully added to the PDF document. The following example shows how to use this callback. +The callback provided to the [onAnnotationAdded](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onAnnotationAdded.html) property is triggered when an annotation is successfully added to the PDF document. The following example shows how to use this callback. {% tabs %} {% highlight dart hl_lines="7 8 9" %} @@ -69,7 +69,7 @@ This section will go through different methods of removing annotations from a PD ### Remove a specific annotation programmatically -You can programmatically remove an annotation from the document by providing the specific annotation instance as the parameter to the `removeAnnotation` method of `PdfViewerController`. The following example shows how to remove the first annotation in the annotation collection from a PDF document. +You can programmatically remove an annotation from the document by providing the specific annotation instance as the parameter to the [removeAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/removeAnnotation.html) method of [PdfViewerController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController-class.html). The following example shows how to remove the first annotation in the annotation collection from a PDF document. {% tabs %} {% highlight dart hl_lines="8" %} @@ -90,7 +90,7 @@ void removeFirstAnnotation() { ### Remove all the annotations -You can programmatically remove all the annotations from a document by calling the `removeAllAnnotations` method. The optional `pageNumber` parameter can be used to clear the form field data on a specific page. By default, the pageNumber parameter is 0. Refer to the following code example. +You can programmatically remove all the annotations from a document by calling the [removeAllAnnotations](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/removeAllAnnotations.html) method. The optional [pageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/pageNumber.html) parameter can be used to clear the form field data on a specific page. By default, the pageNumber parameter is 0. Refer to the following code example. {% tabs %} {% highlight dart hl_lines="3 8" %} @@ -110,7 +110,7 @@ void removeAllAnnotationsInFirstPage() { ### Annotation removed callback -The callback provided to the `onAnnotationRemoved` property is triggered when an annotation is removed successfully from the PDF document. The following example shows how to use this callback. +The callback provided to the [onAnnotationRemoved](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onAnnotationRemoved.html) property is triggered when an annotation is removed successfully from the PDF document. The following example shows how to use this callback. {% tabs %} {% highlight dart hl_lines="7 8 9" %} diff --git a/Flutter/pdf-viewer/annotation-collection.md b/Flutter/pdf-viewer/annotation-collection.md index 6b06a95c8..f9db0e5d6 100644 --- a/Flutter/pdf-viewer/annotation-collection.md +++ b/Flutter/pdf-viewer/annotation-collection.md @@ -9,7 +9,7 @@ documentation: ug # Annotation Collection in Flutter PDF Viewer widget (Syncfusion) -The annotations in the PDF document can be accessed by the `getAnnotations` method of the `PdfViewerController`. The return value of the function will have Annotation collection as soon as the document is loaded in the PDF viewer. The following code example shows how the annotation collection can be accessed. +The annotations in the PDF document can be accessed by the [getAnnotations](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/getAnnotations.html) method of the [PdfViewerController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController-class.html). The return value of the function will have Annotation collection as soon as the document is loaded in the PDF viewer. The following code example shows how the annotation collection can be accessed. {% tabs %} {% highlight dart hl_lines="9 10" %} diff --git a/Flutter/pdf-viewer/annotations-overview.md b/Flutter/pdf-viewer/annotations-overview.md index 5b20144f7..870d8ff90 100644 --- a/Flutter/pdf-viewer/annotations-overview.md +++ b/Flutter/pdf-viewer/annotations-overview.md @@ -9,11 +9,11 @@ documentation: ug # Annotations in Flutter PDF Viewer (SfPdfViewer) -The `SfPdfViewer` allows you to add, remove, and modify annotations in PDF documents. This section will go through the various types and functionalities available in PDF Viewer for working with annotations. +The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to add, remove, and modify annotations in PDF documents. This section will go through the various types and functionalities available in PDF Viewer for working with annotations. ## Supported annotation types -The `SfPdfViewer` supports the following annotation types. +The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) supports the following annotation types. 1. Highlight 2. Squiggly 3. Strikethrough diff --git a/Flutter/pdf-viewer/form-filling.md b/Flutter/pdf-viewer/form-filling.md index 80cf49623..4c795ba1a 100644 --- a/Flutter/pdf-viewer/form-filling.md +++ b/Flutter/pdf-viewer/form-filling.md @@ -412,7 +412,7 @@ class _HomePage extends State { ## Restrict the editing of form fields -To prevent editing the values of the form fields in the PDF document, set the `readOnly` property of the respective form field to `true`. +To prevent editing the values of the form fields in the PDF document, set the [readOnly](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormField/readOnly.html) property of the respective form field to `true`. {% tabs %} {% highlight dart hl_lines="17" %} @@ -450,7 +450,7 @@ Widget build(BuildContext context) { ## Clear form data -The [clearFormData](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/clearFormData.html) method clears all the form field data in the PDF document. The optional `pageNumber` parameter can be used to clear the form field data on a specific page. By default, the `pageNumber` parameter is 0. Refer to the following code example. +The [clearFormData](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/clearFormData.html) method clears all the form field data in the PDF document. The optional [pageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/pageNumber.html) parameter can be used to clear the form field data on a specific page. By default, the [pageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/pageNumber.html) parameter is 0. Refer to the following code example. {% tabs %} {% highlight dart hl_lines="16 26" %} @@ -672,7 +672,7 @@ Widget build(BuildContext context) { If you performed undesired actions when editing the form fields, you can undo and redo the action to restore the previous state. -The undo and redo operations are performed by assigning the `UndoHistoryController` instance to the `undoController` property of the `SfPdfViewer`. The UndoHistoryController class contains the `undo` and `redo` methods to perform the same, respectively. The `canUndo` and `canRedo` properties are used to check whether the undo and redo operations can be performed or not, respectively. The following code example illustrates how to perform the form filling undo and redo operations programmatically with the `SfPdfViewer`. +The undo and redo operations are performed by assigning the `UndoHistoryController` instance to the [undoController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/undoController.html) property of the `SfPdfViewer`. The UndoHistoryController class contains the `undo` and `redo` methods to perform the same, respectively. The `canUndo` and `canRedo` properties are used to check whether the undo and redo operations can be performed or not, respectively. The following code example illustrates how to perform the form filling undo and redo operations programmatically with the `SfPdfViewer`. {% tabs %} {% highlight dart hl_lines="12 13 21 22 29" %} @@ -742,7 +742,7 @@ The `SfPdfViewer` supports the [PdfFormFieldFocusChangeCallback](https://pub.dev ### Form field focus change callback -The [onFormFieldFocusChange](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onFormFieldFocusChange.html) callback triggers when the focus changes in or out of the form field. The [PdfFormFieldFocusChangeDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldFocusChangeDetails-class.html) will return the `formField` instance and its focus change value in the `hasFocus` property. The following code example explains the same. +The [onFormFieldFocusChange](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onFormFieldFocusChange.html) callback triggers when the focus changes in or out of the form field. The [PdfFormFieldFocusChangeDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldFocusChangeDetails-class.html) will return the [formField](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldFocusChangeDetails/formField.html) instance and its focus change value in the [hasFocus](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldFocusChangeDetails/hasFocus.html) property. The following code example explains the same. {% tabs %} {% highlight dart hl_lines="9 10 11" %} @@ -769,7 +769,7 @@ N> The `PdfFormFieldFocusChangeCallback` only triggers for text boxes and signat ### Form field value changed callback -The [onFormFieldValueChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onFormFieldValueChanged.html) callback triggers when the value is changed in the form field. The [PdfFormFieldValueChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldValueChangedDetails-class.html) the `formField` instance along with its `oldValue` and `newValue`. The following code example explains the same. +The [onFormFieldValueChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onFormFieldValueChanged.html) callback triggers when the value is changed in the form field. The [PdfFormFieldValueChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldValueChangedDetails-class.html) the [formField](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldFocusChangeDetails/formField.html) instance along with its [oldValue](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldValueChangedDetails/oldValue.html) and [newValue](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfFormFieldValueChangedDetails/newValue.html). The following code example explains the same. {% tabs %} {% highlight dart hl_lines="9 10 11 12" %} diff --git a/Flutter/pdf-viewer/load-page-programmatically b/Flutter/pdf-viewer/load-page-programmatically new file mode 100644 index 000000000..736241caa --- /dev/null +++ b/Flutter/pdf-viewer/load-page-programmatically @@ -0,0 +1,76 @@ +## Load the document with the specified page + +The `SfPdfViewer` allows you to load the document with the specified page using the `initialPageNumber` property. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', + initialPageNumber: 5)); +} + +{% endhighlight %} +{% endtabs %} + +N> It is recommended not to use both the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) and `initialPageNumber` properties at the same time. If both properties are defined, the `initialPageNumber` will be prioritized over the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) + +## 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) and [initialZoomLevel](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialZoomLevel.html) properties. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="6 7" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body: 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](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/scrollOffset.html) property. The following code example explains the same. + +{% tabs %} +{% highlight dart hl_lines="16 17" %} + +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 %} diff --git a/Flutter/pdf-viewer/lock-unlock-annotations.md b/Flutter/pdf-viewer/lock-unlock-annotations.md index 0af2acceb..62c2e4d91 100644 --- a/Flutter/pdf-viewer/lock-unlock-annotations.md +++ b/Flutter/pdf-viewer/lock-unlock-annotations.md @@ -13,7 +13,7 @@ You can lock an annotation to prevent it from being edited. The annotation that ## Lock all annotations in a document -To lock all annotations in a document, set the `isLocked` property of the `annotationSettings` to true. The following example explains how to lock all annotations in a document. +To lock all annotations in a document, set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property of the [annotationSettings](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/annotationSettings.html) to true. The following example explains how to lock all annotations in a document. {% tabs %} {% highlight dart hl_lines="3" %} @@ -26,11 +26,11 @@ void lockAllAnnotations() { {% endhighlight %} {% endtabs %} -* Similarly, to unlock all the annotations, set the `isLocked` property value to false. +* Similarly, to unlock all the annotations, set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property value to false. ## Lock a specific annotation -To lock a specific annotation in a document, access the annotation instance and set the `isLocked` property of the annotation to true. The following example explains how to lock the first annotation in a PDF document. +To lock a specific annotation in a document, access the annotation instance and set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property of the annotation to true. The following example explains how to lock the first annotation in a PDF document. {% tabs %} {% highlight dart hl_lines="8" %} @@ -49,11 +49,11 @@ void lockFirstAnnotation() { {% endhighlight %} {% endtabs %} -* Similarly, to unlock the annotation, set the `isLocked` property value to false. +* Similarly, to unlock the annotation, set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property value to false. ## Lock specific annotation types -You can also use the `annotationSettings` property to lock a specific annotation type in a document. The following example explains how to lock all the underline annotations in a document by accessing the underline annotation settings. Similarly, you can lock other types of annotation. +You can also use the [annotationSettings](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/annotationSettings.html) property to lock a specific annotation type in a document. The following example explains how to lock all the underline annotations in a document by accessing the underline annotation settings. Similarly, you can lock other types of annotation. {% tabs %} {% highlight dart %} @@ -69,11 +69,11 @@ void lockUnderlineAnnotations() { {% endhighlight %} {% endtabs %} -* Similarly, to unlock the specific annotation types, set the `isLocked` property value to false. +* Similarly, to unlock the specific annotation types, set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property value to false. ## Lock the selected annotation -To lock the selected annotation, access the selected annotation instance and set the `isLocked` property to true. The selected annotation instance may be obtained from the `onAnnotationSelected` callback. The following example explains locking the selected annotation in a PDF document. +To lock the selected annotation, access the selected annotation instance and set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property to true. The selected annotation instance may be obtained from the [onAnnotationSelected](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onAnnotationSelected.html) callback. The following example explains locking the selected annotation in a PDF document. {% tabs %} {% highlight dart %} @@ -86,4 +86,4 @@ void lockSelectedAnnotation(Annotation selectedAnnotation) { {% endhighlight %} {% endtabs %} -* Similarly, to unlock the selected annotation, set the `isLocked` property value to false. +* Similarly, to unlock the selected annotation, set the [isLocked](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfBaseAnnotationSettings/isLocked.html) property value to false. diff --git a/Flutter/pdf-viewer/magnification.md b/Flutter/pdf-viewer/magnification.md index cd901e06e..d3fa4488a 100644 --- a/Flutter/pdf-viewer/magnification.md +++ b/Flutter/pdf-viewer/magnification.md @@ -55,7 +55,7 @@ Widget build(BuildContext context) { ## Set and adjust the maximum zoom level -The `SfPdfViewer` allows you to set and adjust the maximum zoom level for the PDF document being displayed using the `maxZoomLevel` property. The following code example explains the same. +The `SfPdfViewer` allows you to set and adjust the maximum zoom level for the PDF document being displayed using the [maxZoomLevel](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/maxZoomLevel.html) property. The following code example explains the same. {% tabs %} {% highlight dart hl_lines="6" %} @@ -107,7 +107,7 @@ The [onZoomLevelChanged](https://pub.dev/documentation/syncfusion_flutter_pdfvie • When the double-tap zoom is performed. • When the `zoomLevel` property is changed. -The [PdfZoomDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfZoomDetails-class.html) will return the `oldZoomLevel` title and `newZoomLevel` values. The following code example explains the same. +The [PdfZoomDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfZoomDetails-class.html) will return the [oldZoomLevel](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfZoomDetails/oldZoomLevel.html) title and [newZoomLevel](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfZoomDetails/newZoomLevel.html) values. The following code example explains the same. {% tabs %} {% highlight dart hl_lines="6 7 8" %} diff --git a/Flutter/pdf-viewer/open-a-document-password-protected.md b/Flutter/pdf-viewer/open-a-document-password-protected.md deleted file mode 100644 index 9615d0686..000000000 --- a/Flutter/pdf-viewer/open-a-document-password-protected.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -layout: post -title: Open a Password-Protected PDF in Flutter PDF Viewer widget (SfPdfViewer) | Syncfusion -description: Learn here about opening a password-protected document in Syncfusion Flutter PDF Viewer widget and more. -platform: flutter -control: SfPdfViewer -documentation: ug ---- - -# Open a Password-Protected PDF in Flutter PDF Viewer (SfPdfViewer) -To load a password-protected document without a password or with an invalid password in [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) using the [password](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/password.html) property. The default password dialog will be displayed. - -![Password dialog](images/password-dialog/password-dialog.png) - -## Customize the visibility of password dialog - -The password-protected document can be loaded by providing the password in the [password](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/password.html) property of SfPdfViewer. The [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property allows the user to customize the password dialog visibility. The following code example explains the same. - -{% tabs %} -{% highlight dart hl_lines="7 8" %} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - child: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf', - password:'syncfusion', - canShowPasswordDialog: false,))); -} - -{% endhighlight %} -{% endtabs %} - -## How to create and display a Customized Password Dialog? - -The `SfPdfViewer` library allows you to create and display a customized password dialog. The following code example explains the same. -In this example, We have disabled the built-in password dialog by setting the false to the [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property and creating the customized password dialog with the [AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html) widget. Whenever the `password` is empty or incorrect, the [onDocumentLoadFailed](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoadFailed.html) callback is triggered, used this callback to display the customized password dialog. - -{% tabs %} -{% highlight Dart %} - -import 'package:flutter/material.dart'; -import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart'; -import 'package:flutter/foundation.dart'; - -void main() { - runApp(const MaterialApp(home: CustomPasswordDialog())); -} - -class CustomPasswordDialog extends StatefulWidget { - const CustomPasswordDialog({Key? key}) : super(key: key); - - @override - _CustomPasswordDialogState createState() => _CustomPasswordDialogState(); -} - -class _CustomPasswordDialogState extends State { - String? _password; - final GlobalKey _formKey = GlobalKey(); - final TextEditingController _textFieldController = TextEditingController(); - final FocusNode _passwordDialogFocusNode = FocusNode(); - bool _hasPasswordDialog = false; - String _errorText = ''; - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: const Text('Custom password dialog'), - toolbarHeight: 56, - ), - body: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf', - canShowPasswordDialog: false, - password: _password, - onDocumentLoaded: (details) { - if (_hasPasswordDialog) { - Navigator.pop(context); - _hasPasswordDialog = false; - _passwordDialogFocusNode.unfocus(); - _textFieldController.clear(); - } - }, - onDocumentLoadFailed: (details) { - if (details.description.contains('password')) { - if (details.description.contains('password') && - _hasPasswordDialog) { - _errorText = "Invalid password !!"; - _formKey.currentState?.validate(); - _textFieldController.clear(); - _passwordDialogFocusNode.requestFocus(); - } else { - _errorText = ''; - /// Creating custom password dialog. - _showCustomPasswordDialog(); - _passwordDialogFocusNode.requestFocus(); - _hasPasswordDialog = true; - } - } - }, - ), - ); - } - - /// Show the customized password dialog - Future _showCustomPasswordDialog() async { - return showDialog( - context: context, - builder: (BuildContext context) { - final Orientation orientation = kIsWeb - ? Orientation.portrait - : MediaQuery.of(context).orientation; - return AlertDialog( - scrollable: true, - insetPadding: EdgeInsets.zero, - contentPadding: orientation == Orientation.portrait - ? const EdgeInsets.all(24) - : const EdgeInsets.only(top: 0, right: 24, left: 24, bottom: 0), - buttonPadding: orientation == Orientation.portrait - ? const EdgeInsets.all(8) - : const EdgeInsets.all(4), - title: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - 'Password required', - style: TextStyle( - fontFamily: 'Roboto', - fontSize: 20, - fontWeight: FontWeight.w500, - color: Theme.of(context) - .colorScheme - .onSurface - .withOpacity(0.87), - ), - ), - SizedBox( - height: 36, - width: 36, - child: RawMaterialButton( - onPressed: () { - _closePasswordDialog(); - }, - child: Icon( - Icons.clear, - color: Theme.of(context) - .colorScheme - .onSurface - .withOpacity(0.6), - size: 24, - ), - ), - ), - ], - ), - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(4.0))), - content: SingleChildScrollView( - child: SizedBox( - width: 326, - child: Column(children: [ - Align( - alignment: Alignment.centerLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 30), - child: Text( - 'The document is password protected. Please enter a password.', - style: TextStyle( - fontFamily: 'Roboto', - fontSize: 16, - fontWeight: FontWeight.w400, - color: Theme.of(context) - .colorScheme - .onSurface - .withOpacity(0.6), - ), - ), - ), - ), - Form( - child: TextFormField( - key: _formKey, - controller: _textFieldController, - focusNode: _passwordDialogFocusNode, - obscureText: true, - decoration: const InputDecoration( - hintText: 'Password hint: syncfusion', - border: OutlineInputBorder( - borderSide: BorderSide(color: Colors.blue)), - focusedBorder: OutlineInputBorder( - borderSide: BorderSide(color: Colors.blue))), - obscuringCharacter: '#', - onFieldSubmitted: (value) { - _handlePasswordValidation(value); - }, - validator: (value) { - if (_errorText.isNotEmpty) { - return _errorText; - } - return null; - }, - onChanged: (value) { - _formKey.currentState?.validate(); - _errorText = ''; - }, - ), - ) - ]))), - actions: [ - TextButton( - onPressed: () { - _handlePasswordValidation(_textFieldController.text); - }, - child: Text( - 'OK', - style: TextStyle( - fontFamily: 'Roboto', - fontSize: 14, - fontWeight: FontWeight.w500, - color: Theme.of(context).colorScheme.primary, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: TextButton( - onPressed: () { - _closePasswordDialog(); - }, - child: Text( - 'CANCEL', - style: TextStyle( - fontFamily: 'Roboto', - fontSize: 14, - fontWeight: FontWeight.w500, - color: Theme.of(context).colorScheme.primary, - ), - ), - ), - ) - ], - ); - }); - } - - ///Close the password dialog - void _closePasswordDialog() { - Navigator.pop(context, 'Cancel'); - _hasPasswordDialog = false; - _passwordDialogFocusNode.unfocus(); - _textFieldController.clear(); - } - - /// Validates the password entered in text field. - void _handlePasswordValidation(String value) { - setState(() { - _password = value; - _passwordDialogFocusNode.requestFocus(); - }); - } -} - -{% endhighlight %} -{% endtabs %} - -![Custom Password dialog](images/password-dialog/custompassword-dialog.png) diff --git a/Flutter/pdf-viewer/page-layout-and-scroll-direction.md b/Flutter/pdf-viewer/page-layout-and-scroll-direction.md index 570f194a7..1a4609f8d 100644 --- a/Flutter/pdf-viewer/page-layout-and-scroll-direction.md +++ b/Flutter/pdf-viewer/page-layout-and-scroll-direction.md @@ -54,6 +54,23 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} +Similarly, the PDF can be displayed in vertical direction in `Single` page layout mode. To enable this feature, assign the value for [scrollDirection](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/scrollDirection.html) property in `SfPdfViewer`as `PdfScrollDirection.vertical`. Use the following code sample to achieve the same: + +{% tabs %} +{% highlight dart hl_lines="6 7" %} + +@override +Widget build(BuildContext context) { + return Scaffold( + body:SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', + pageLayoutMode: PdfPageLayoutMode.single + scrollDirection: PdfScrollDirection.vertical)); +} + +{% endhighlight %} +{% endtabs %} + ![Single page layout mode in Flutter PDF Viewer.](images/page-layout-and-scroll-direction/flutter-pdf-viewer-page-by-page.gif) ## Scrolling options diff --git a/Flutter/pdf-viewer/page-navigation.md b/Flutter/pdf-viewer/page-navigation.md index 27a178451..64cb9d17b 100644 --- a/Flutter/pdf-viewer/page-navigation.md +++ b/Flutter/pdf-viewer/page-navigation.md @@ -214,7 +214,7 @@ The [onPageChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/l * When scrolling is performed programmatically using the [jumpTo](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpTo.html) controller method. * When bookmark navigation is performed programmatically using the [jumpToBookmark](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpToBookmark.html) controller method. -The [PdfPageChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails-class.html) will return the `oldPageNumber`, `newPageNumber`, `isFirstPage` and `isLastPage` values. The following code example explains the same. +The [PdfPageChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails-class.html) will return the [oldPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/oldPageNumber.html), [newPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/newPageNumber.html), [isFirstPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/search.html?q=isFirstPage) and [isLastPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/isLastPage.html) values. The following code example explains the same. {% tabs %} {% highlight dart hl_lines="6 7 8 9" %} diff --git a/Flutter/pdf-viewer/select-deselect-annotations.md b/Flutter/pdf-viewer/select-deselect-annotations.md index 079b6cdb4..9229b47cb 100644 --- a/Flutter/pdf-viewer/select-deselect-annotations.md +++ b/Flutter/pdf-viewer/select-deselect-annotations.md @@ -9,7 +9,7 @@ documentation: ug # Select and Deselect Annotations in Flutter PDF Viewer widget (Syncfusion) -This section will go through the various functions available in the `SfPdfViewer` for selecting and deselecting annotations in a PDF document. +This section will go through the various functions available in the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) for selecting and deselecting annotations in a PDF document. ## Select an annotation @@ -17,7 +17,7 @@ You can select an annotation by simply tapping on the annotation using touch or ### Select an annotation programmatically -You can select an annotation programmatically by providing the annotation instance as the parameter to the `selectAnnotation` method of the PdfViewerController. The annotation instance can be found in the `getAnnotations` method of the PdfViewerController. The following example explains how to select the first annotation in the annotation collection. +You can select an annotation programmatically by providing the annotation instance as the parameter to the [selectAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/selectAnnotation.html) method of the PdfViewerController. The annotation instance can be found in the [getAnnotations](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/getAnnotations.html) method of the PdfViewerController. The following example explains how to select the first annotation in the annotation collection. {% tabs %} {% highlight dart hl_lines="8" %} @@ -38,7 +38,7 @@ void selectFirstAnnotation() { ### Annotation selected callback -The callback provided to the `onAnnotationSelected` property is triggered when an annotation is selected interactively or programmatically. The selected annotation instance can be obtained from the callback details. The following code sample explains how to use this callback. +The callback provided to the [onAnnotationSelected](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onAnnotationSelected.html) property is triggered when an annotation is selected interactively or programmatically. The selected annotation instance can be obtained from the callback details. The following code sample explains how to use this callback. {% tabs %} {% highlight dart hl_lines="7 8 9 10" %} @@ -63,7 +63,7 @@ Widget build(BuildContext context) { ### Customizing selector appearance -The `annotationSettings` property of `PdfViewerController` allows you to customize the default selector color. The following example explains how to customize the selector color for locked and unlocked annotations. +The [annotationSettings](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/annotationSettings.html) property of [PdfViewerController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController-class.html) allows you to customize the default selector color. The following example explains how to customize the selector color for locked and unlocked annotations. {% tabs %} {% highlight dart %} @@ -87,7 +87,7 @@ You can deselect an annotation by tapping outside its bounds using a touch or mo ### Deselect an annotation programmatically -You can deselect the annotation programmatically by providing the selected annotation instance as the parameter to the `deselectAnnotation` method. The selected annotation instance may be obtained from the `onAnnotationSelected` callback. The following example shows how to deselect the selected annotation. +You can deselect the annotation programmatically by providing the selected annotation instance as the parameter to the [deselectAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/deselectAnnotation.html) method. The selected annotation instance may be obtained from the [onAnnotationSelected](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onAnnotationSelected.html) callback. The following example shows how to deselect the selected annotation. {% tabs %} {% highlight dart hl_lines="3" %} @@ -102,7 +102,7 @@ void deselectAnnotation(Annotation selectedAnnotation) { ### Annotation deselected callback -The callback provided to the `onAnnotationDeselected` property is triggered when an annotation is deselected interactively or programmatically. The following code sample explains how to use this callback. +The callback provided to the [onAnnotationDeselected](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onAnnotationDeselected.html) property is triggered when an annotation is deselected interactively or programmatically. The following code sample explains how to use this callback. {% tabs %} {% highlight dart hl_lines="7 8 9 10" %} diff --git a/Flutter/pdf-viewer/text-markup.md b/Flutter/pdf-viewer/text-markup.md index 49f54fde9..4dd590ade 100644 --- a/Flutter/pdf-viewer/text-markup.md +++ b/Flutter/pdf-viewer/text-markup.md @@ -25,7 +25,7 @@ This section will go through how to add text markup annotations to a PDF documen ### Add text markups from annotation mode -You can add text markup annotations to a PDF document by touching (or mouse down) and dragging using the `annotationMode` property of the PdfViewerController. The following steps explain how to add text markup annotation on a text in a PDF. +You can add text markup annotations to a PDF document by touching (or mouse down) and dragging using the [annotationMode](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/annotationMode.html) property of the PdfViewerController. The following steps explain how to add text markup annotation on a text in a PDF. 1. Set the AnnotationMode property of the SfPdfViewer to any text markups (say Highlight). It activates the highlight annotation mode on the control. 2. Place your finger (or mouse) on the text in the PDF document where you want to start adding the text markup. @@ -63,7 +63,7 @@ void disableAnnotationMode() { ### Add text markups from text selection -Text markups can be added to a PDF document using the text selection without enabling the `annotationMode`. Select the text you want in a PDF document, and a context menu with the text markup options will appear after you complete your selection. You can select any text markup options to add annotation to a text in the PDF document. +Text markups can be added to a PDF document using the text selection without enabling the [annotationMode](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/annotationMode.html). Select the text you want in a PDF document, and a context menu with the text markup options will appear after you complete your selection. You can select any text markup options to add annotation to a text in the PDF document. ![Text selection context menu in Flutter PDF Viewer.](images/annotations/flutter-pdf-viewer-text-selection-context-menu.png) diff --git a/Flutter/pdf-viewer/text-selection.md b/Flutter/pdf-viewer/text-selection.md index b2b186148..e4a59f056 100644 --- a/Flutter/pdf-viewer/text-selection.md +++ b/Flutter/pdf-viewer/text-selection.md @@ -198,7 +198,7 @@ class _HomePageState extends State { } }, style: ButtonStyle( - shape: MaterialStateProperty.all(RoundedRectangleBorder( + shape: WidgetStateProperty.all(RoundedRectangleBorder( borderRadius: BorderRadius.circular(2), )), ), diff --git a/Flutter/pdf-viewer/undo-redo.md b/Flutter/pdf-viewer/undo-redo.md index 0b2ffbadf..b75fd3197 100644 --- a/Flutter/pdf-viewer/undo-redo.md +++ b/Flutter/pdf-viewer/undo-redo.md @@ -31,7 +31,7 @@ For desktop platforms such as Windows, macOS, and desktop web, you can use the f -You can perform the undo and redo operations in the `SfPdfViewer` by assigning the `UndoHistoryController` instance to the `undoController` property of the `SfPdfViewer`. The UndoHistoryController class contains the `undo` and `redo` methods to perform the undo and redo operations, respectively. The `canUndo` and `canRedo` properties check whether the undo and redo operations can be performed, respectively. The following code example illustrates how to perform the undo and redo operations programmatically in the `SfPdfViewer` with the help of the UndoHistoryController class. +You can perform the undo and redo operations in the `SfPdfViewer` by assigning the `UndoHistoryController` instance to the [undoController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/undoController.html) property of the `SfPdfViewer`. The UndoHistoryController class contains the `undo` and `redo` methods to perform the undo and redo operations, respectively. The `canUndo` and `canRedo` properties check whether the undo and redo operations can be performed, respectively. The following code example illustrates how to perform the undo and redo operations programmatically in the `SfPdfViewer` with the help of the UndoHistoryController class. {% tabs %} {% highlight dart hl_lines="12 13 21 22 29" %} diff --git a/Flutter/pdf-viewer/viewing-password-protected-pdf-files.md b/Flutter/pdf-viewer/viewing-password-protected-pdf-files.md index a5111f7a6..2bd49cabc 100644 --- a/Flutter/pdf-viewer/viewing-password-protected-pdf-files.md +++ b/Flutter/pdf-viewer/viewing-password-protected-pdf-files.md @@ -18,16 +18,16 @@ To load a password-protected document without a password or with an invalid pass The password-protected document can be loaded by providing the password in the [password](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/password.html) property of SfPdfViewer. The [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property allows the user to customize the password dialog visibility. The following code example explains the same. {% tabs %} -{% highlight dart hl_lines="7 8" %} +{% highlight dart hl_lines="6 7" %} @override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - child: SfPdfViewer.network( - 'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf', - password:'syncfusion', - canShowPasswordDialog: false,))); + Widget build(BuildContext context) { + return Scaffold( + body: SfPdfViewer.network( + 'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf', + password: 'syncfusion', + canShowPasswordDialog: false, + )); } {% endhighlight %} @@ -36,7 +36,7 @@ Widget build(BuildContext context) { ## How to create and display a Customized Password Dialog? The `SfPdfViewer` library allows you to create and display a customized password dialog. The following code example explains the same. -In this example, We have disabled the built-in password dialog by setting the false to the [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property and creating the customized password dialog with the [AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html) widget. Whenever the `password` is empty or incorrect, the [onDocumentLoadFailed](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoadFailed.html) callback is triggered, used this callback to display the customized password dialog. +In this example, We have disabled the built-in password dialog by setting the false to the [canShowPasswordDialog](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/canShowPasswordDialog.html) property and creating the customized password dialog with the [AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html) widget. Whenever the [password](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/password.html) is empty or incorrect, the [onDocumentLoadFailed](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onDocumentLoadFailed.html) callback is triggered, used this callback to display the customized password dialog. {% tabs %} {% highlight Dart %} From efb5adb8b3438cae6bb799e6b85e2862b256a2af Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Fri, 7 Jun 2024 16:14:08 +0530 Subject: [PATCH 4/7] FLUT-889763-[documentation][flutter]: Addressed review comments --- .../{load-document-events.md => load-document-callbacks.md} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename Flutter/pdf-viewer/{load-document-events.md => load-document-callbacks.md} (95%) diff --git a/Flutter/pdf-viewer/load-document-events.md b/Flutter/pdf-viewer/load-document-callbacks.md similarity index 95% rename from Flutter/pdf-viewer/load-document-events.md rename to Flutter/pdf-viewer/load-document-callbacks.md index 56519fcde..a040ffcb3 100644 --- a/Flutter/pdf-viewer/load-document-events.md +++ b/Flutter/pdf-viewer/load-document-callbacks.md @@ -1,13 +1,13 @@ --- layout: post -title: Document Load Events in Flutter PDF Viewer (SfPdfViewer) | Syncfusion +title: Document Load Callbacks in Flutter PDF Viewer (SfPdfViewer) | Syncfusion description: Learn here all about events that notifies whether the document has been loaded or failed to get loaded in the Syncfusion Flutter PDF Viewer (SfPdfViewer). platform: flutter control: SfPdfViewer documentation: ug --- -# Document Load Events in Flutter PDF Viewer (SfPdfViewer) +# Document Load Callbacks in Flutter PDF Viewer (SfPdfViewer) The `SfPdfViewer` loading supports the [PdfDocumentLoadedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadedCallback.html) and [PdfDocumentLoadFailedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfDocumentLoadFailedCallback.html) to notify whether the document has been loaded completely or not. ### Document loaded callback From 8e8948d148b2190ddfbc2ade99ba762709889c17 Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Mon, 10 Jun 2024 11:35:54 +0530 Subject: [PATCH 5/7] FLUT-889763-[documentation][flutter]: Added links in the toc file --- flutter-toc.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/flutter-toc.html b/flutter-toc.html index 63d5c70c7..e17e46b06 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -474,9 +474,18 @@
  • Overview
  • Getting started
    • +
  • Open a Document + +
  • Viewing Password protected PDF Files
  • Page layout and Scrolling options
  • Interaction modes
    • +
  • UI customizations
  • Magnification
  • Text selection
  • Text search
    • From d324f102b7a183f10f22d6659d5b54b4f7b17292 Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Fri, 14 Jun 2024 17:20:45 +0530 Subject: [PATCH 6/7] FLUT-889763-[documentation][flutter]: Addressed review comments --- .../pdf-viewer/add-remove-modify-annotations.md | 4 ++-- Flutter/pdf-viewer/form-filling.md | 4 ++-- Flutter/pdf-viewer/load-document-callbacks.md | 2 +- Flutter/pdf-viewer/load-page-programmatically | 15 +++++++++++++-- Flutter/pdf-viewer/page-navigation.md | 2 +- Flutter/pdf-viewer/undo-redo.md | 2 +- 6 files changed, 20 insertions(+), 9 deletions(-) diff --git a/Flutter/pdf-viewer/add-remove-modify-annotations.md b/Flutter/pdf-viewer/add-remove-modify-annotations.md index 55598754f..f618f893e 100644 --- a/Flutter/pdf-viewer/add-remove-modify-annotations.md +++ b/Flutter/pdf-viewer/add-remove-modify-annotations.md @@ -17,7 +17,7 @@ This section will go through how to add annotations to a PDF document programmat ### Add annotations programmatically -You can programmatically add a new annotation to the PDF document by creating an annotation instance and providing it as a parameter to the [addAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/search.html?q=addAnnotation) method of the [PdfViewerController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController-class.html) class. The following example shows how to create an instance of a highlight annotation and add it to the PDF document. Similarly, you can create and add other types of annotation. +You can programmatically add a new annotation to the PDF document by creating an annotation instance and providing it as a parameter to the [addAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/addAnnotation.html) method of the [PdfViewerController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController-class.html) class. The following example shows how to create an instance of a highlight annotation and add it to the PDF document. Similarly, you can create and add other types of annotation. {% tabs %} {% highlight dart hl_lines="11" %} @@ -90,7 +90,7 @@ void removeFirstAnnotation() { ### Remove all the annotations -You can programmatically remove all the annotations from a document by calling the [removeAllAnnotations](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/removeAllAnnotations.html) method. The optional [pageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/pageNumber.html) parameter can be used to clear the form field data on a specific page. By default, the pageNumber parameter is 0. Refer to the following code example. +You can programmatically remove all the annotations from a document by calling the [removeAllAnnotations](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/removeAllAnnotations.html) method. The optional `pageNumber` parameter can be used to clear the form field data on a specific page. By default, the `pageNumber` parameter is 0. Refer to the following code example. {% tabs %} {% highlight dart hl_lines="3 8" %} diff --git a/Flutter/pdf-viewer/form-filling.md b/Flutter/pdf-viewer/form-filling.md index 4c795ba1a..c33537a90 100644 --- a/Flutter/pdf-viewer/form-filling.md +++ b/Flutter/pdf-viewer/form-filling.md @@ -450,7 +450,7 @@ Widget build(BuildContext context) { ## Clear form data -The [clearFormData](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/clearFormData.html) method clears all the form field data in the PDF document. The optional [pageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/pageNumber.html) parameter can be used to clear the form field data on a specific page. By default, the [pageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/pageNumber.html) parameter is 0. Refer to the following code example. +The [clearFormData](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/clearFormData.html) method clears all the form field data in the PDF document. The optional `pageNumber` parameter can be used to clear the form field data on a specific page. By default, the `pageNumber` parameter is 0. Refer to the following code example. {% tabs %} {% highlight dart hl_lines="16 26" %} @@ -672,7 +672,7 @@ Widget build(BuildContext context) { If you performed undesired actions when editing the form fields, you can undo and redo the action to restore the previous state. -The undo and redo operations are performed by assigning the `UndoHistoryController` instance to the [undoController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/undoController.html) property of the `SfPdfViewer`. The UndoHistoryController class contains the `undo` and `redo` methods to perform the same, respectively. The `canUndo` and `canRedo` properties are used to check whether the undo and redo operations can be performed or not, respectively. The following code example illustrates how to perform the form filling undo and redo operations programmatically with the `SfPdfViewer`. +The undo and redo operations are performed by assigning the `UndoHistoryController` instance to the [undoController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/undoController.html) property of the `SfPdfViewer`. The UndoHistoryController class contains the [undo](https://api.flutter.dev/flutter/widgets/UndoHistoryController/undo.html) and [redo](https://api.flutter.dev/flutter/widgets/UndoHistoryController/redo.html) methods to perform the same, respectively. The [canUndo](https://api.flutter.dev/flutter/widgets/UndoHistoryValue/canUndo.html) and [canRedo](https://api.flutter.dev/flutter/widgets/UndoHistoryValue/canRedo.html) properties are used to check whether the undo and redo operations can be performed or not, respectively. The following code example illustrates how to perform the form filling undo and redo operations programmatically with the `SfPdfViewer`. {% tabs %} {% highlight dart hl_lines="12 13 21 22 29" %} diff --git a/Flutter/pdf-viewer/load-document-callbacks.md b/Flutter/pdf-viewer/load-document-callbacks.md index a040ffcb3..1b8ad887e 100644 --- a/Flutter/pdf-viewer/load-document-callbacks.md +++ b/Flutter/pdf-viewer/load-document-callbacks.md @@ -1,7 +1,7 @@ --- layout: post title: Document Load Callbacks in Flutter PDF Viewer (SfPdfViewer) | Syncfusion -description: Learn here all about events that notifies whether the document has been loaded or failed to get loaded in the Syncfusion Flutter PDF Viewer (SfPdfViewer). +description: Learn here all about callbacks that notifies whether the document has been loaded or failed to get loaded in the Syncfusion Flutter PDF Viewer (SfPdfViewer). platform: flutter control: SfPdfViewer documentation: ug diff --git a/Flutter/pdf-viewer/load-page-programmatically b/Flutter/pdf-viewer/load-page-programmatically index 736241caa..9d4fbf53e 100644 --- a/Flutter/pdf-viewer/load-page-programmatically +++ b/Flutter/pdf-viewer/load-page-programmatically @@ -1,6 +1,17 @@ +--- +layout: post +title: Load document by Page Number, Scroll Offset, or Zoom Level in Flutter PDF Viewer | Syncfusion +description: Learn here all about loading document by Page Number, Scroll Offset, or Zoom Level feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget. +platform: Flutter +control: SfPdfViewer +documentation: ug +--- + +# Load document by Page Number, Scroll Offset, or Zoom Level in Flutter PDF Viewer (SfPdfViewer) + ## Load the document with the specified page -The `SfPdfViewer` allows you to load the document with the specified page using the `initialPageNumber` property. The following code example explains the same. +The `SfPdfViewer` allows you to load the document with the specified page using the [initialPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialPageNumber.html) property. The following code example explains the same. {% tabs %} {% highlight dart hl_lines="6" %} @@ -16,7 +27,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -N> It is recommended not to use both the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) and `initialPageNumber` properties at the same time. If both properties are defined, the `initialPageNumber` will be prioritized over the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) +N> It is recommended not to use both the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) and [initialPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialPageNumber.html) properties at the same time. If both properties are defined, the [initialPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialPageNumber.html) will be prioritized over the [initialScrollOffset](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/initialScrollOffset.html) ## Load document with the specified scroll offset position or zoom level diff --git a/Flutter/pdf-viewer/page-navigation.md b/Flutter/pdf-viewer/page-navigation.md index 64cb9d17b..7e5be1f5e 100644 --- a/Flutter/pdf-viewer/page-navigation.md +++ b/Flutter/pdf-viewer/page-navigation.md @@ -214,7 +214,7 @@ The [onPageChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/l * When scrolling is performed programmatically using the [jumpTo](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpTo.html) controller method. * When bookmark navigation is performed programmatically using the [jumpToBookmark](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpToBookmark.html) controller method. -The [PdfPageChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails-class.html) will return the [oldPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/oldPageNumber.html), [newPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/newPageNumber.html), [isFirstPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/search.html?q=isFirstPage) and [isLastPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/isLastPage.html) values. The following code example explains the same. +The [PdfPageChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails-class.html) will return the [oldPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/oldPageNumber.html), [newPageNumber](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/newPageNumber.html), [isFirstPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/isFirstPage.html) and [isLastPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails/isLastPage.html) values. The following code example explains the same. {% tabs %} {% highlight dart hl_lines="6 7 8 9" %} diff --git a/Flutter/pdf-viewer/undo-redo.md b/Flutter/pdf-viewer/undo-redo.md index b75fd3197..2bbe56a6a 100644 --- a/Flutter/pdf-viewer/undo-redo.md +++ b/Flutter/pdf-viewer/undo-redo.md @@ -31,7 +31,7 @@ For desktop platforms such as Windows, macOS, and desktop web, you can use the f -You can perform the undo and redo operations in the `SfPdfViewer` by assigning the `UndoHistoryController` instance to the [undoController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/undoController.html) property of the `SfPdfViewer`. The UndoHistoryController class contains the `undo` and `redo` methods to perform the undo and redo operations, respectively. The `canUndo` and `canRedo` properties check whether the undo and redo operations can be performed, respectively. The following code example illustrates how to perform the undo and redo operations programmatically in the `SfPdfViewer` with the help of the UndoHistoryController class. +You can perform the undo and redo operations in the `SfPdfViewer` by assigning the `UndoHistoryController` instance to the [undoController](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/undoController.html) property of the `SfPdfViewer`. The UndoHistoryController class contains the [undo](https://api.flutter.dev/flutter/widgets/UndoHistoryController/undo.html) and [redo](https://api.flutter.dev/flutter/widgets/UndoHistoryController/redo.html) methods to perform the undo and redo operations, respectively. The [canUndo](https://api.flutter.dev/flutter/widgets/UndoHistoryValue/canUndo.html) and [canRedo](https://api.flutter.dev/flutter/widgets/UndoHistoryValue/canRedo.html) properties check whether the undo and redo operations can be performed, respectively. The following code example illustrates how to perform the undo and redo operations programmatically in the `SfPdfViewer` with the help of the UndoHistoryController class. {% tabs %} {% highlight dart hl_lines="12 13 21 22 29" %} From 2bffed25115939fe52cca70a94f4ad342d59b71f Mon Sep 17 00:00:00 2001 From: KrithigaperumalSF4522 Date: Fri, 14 Jun 2024 18:47:06 +0530 Subject: [PATCH 7/7] FLUT-889763-[documentation][flutter]: Changes in toc file --- ...oad-page-programmatically => load-page-programmatically.md} | 0 flutter-toc.html | 3 ++- 2 files changed, 2 insertions(+), 1 deletion(-) rename Flutter/pdf-viewer/{load-page-programmatically => load-page-programmatically.md} (100%) diff --git a/Flutter/pdf-viewer/load-page-programmatically b/Flutter/pdf-viewer/load-page-programmatically.md similarity index 100% rename from Flutter/pdf-viewer/load-page-programmatically rename to Flutter/pdf-viewer/load-page-programmatically.md diff --git a/flutter-toc.html b/flutter-toc.html index e17e46b06..d98d4a88f 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -479,7 +479,8 @@
  • Open a Document from local storage
  • Open a Document from URL
  • Open a Document from memory
    • -
  • Document Loading Callbacks
    • +
  • Load Document with specifications
    • +
  • Document Loading Callbacks
  • Viewing Password protected PDF Files