Skip to content

FLUT-959344: Checked grammar for Flutter PDF viewer files #1232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

FLUT-959344: Checked grammar for Flutter PDF viewer files #1232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54d22e1
FLUT-959344: Check grammar for Flutter PDF viewer files
immankumarsync Jun 3, 2025
19ea338
FLUT-959344: Check grammar for Flutter PDF viewer files
immankumarsync Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions ...df-viewer/How-to/Add-SignaturePad-signatures-to-Syncfusion-Flutter-PdfViewer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ control: SfPdfViewer
documentation: ug
---

# How to add a digital signature in SfPdfViewer using SfSignaturePad?
# How to Add a Digital Signature in SfPdfViewer Using SfSignaturePad?

In this example, we have added the signature drawn on [SfSignaturePad](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad-class.html) to the document in [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) with the help of [Syncfusion<sup>&reg;</sup> PDF Library](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/pdf-library.html#classes).
In this example, we have added the signature drawn on the [SfSignaturePad](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad-class.html) to the document in [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) with the help of the [Syncfusion<sup>&reg;</sup> PDF Library](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/pdf-library.html#classes).

In the `_handleSigningProcess()` method, the signature in SfSignaturePad is saved as image using the [toImage()](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/toImage.html) method. Created a [PdfSignatureField()](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSignatureField-class.html) and added the signature image as digital signature in the PDF document using the [drawImage()](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawImage.html) method in [Syncfusion<sup>&reg;</sup> PDF Library](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/pdf-library.html#classes) and then save the document as bytes. Loaded the saved document bytes using the [SfPdfViewer.memory()](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.memory.html). The following code example explains the same.
In the `_handleSigningProcess()` method, the signature in the SfSignaturePad is saved as an image using the [toImage()](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/toImage.html) method. A [PdfSignatureField()](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSignatureField-class.html) is created, and the signature image is added as a digital signature in the PDF document using the [drawImage()](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawImage.html) method in the [Syncfusion<sup>&reg;</sup> PDF Library](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/pdf-library.html#classes), then saving the document as bytes. The saved document bytes are loaded using the [SfPdfViewer.memory()](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/SfPdfViewer.memory.html). The following code example explains the same.

{% tabs %}
{% highlight Dart %}
Expand Down Expand Up @@ -61,9 +61,9 @@ class _MyHomePageState extends State<_MyHomePage> {
setState(() {});
}

//Add the signature in the PDF document.
// Add the signature in the PDF document.
void _handleSigningProcess() async {
//Save the signature as PNG image.
// Save the signature as a PNG image.
final data =
await _signaturePadGlobalKey.currentState!.toImage(pixelRatio: 3.0);
final bytes = await data.toByteData(format: ui.ImageByteFormat.png);
Expand All @@ -72,40 +72,40 @@ class _MyHomePageState extends State<_MyHomePage> {
ByteData certBytes = await rootBundle.load("assets/certificate.pfx");
final Uint8List certificateBytes = certBytes.buffer.asUint8List();

//Load the document
// Load the document
PdfDocument document = PdfDocument(inputBytes: documentBytes);

//Get the first page of the document. The page in which signature need to be added.
// Get the first page of the document. The page where the signature needs to be added.
PdfPage page = document.pages[0];

//Create a digital signature and set the signature information.
// Create a digital signature and set the signature information.
PdfSignatureField signatureField = PdfSignatureField(page, 'signature',
bounds: const Rect.fromLTRB(300, 500, 550, 700),
signature: PdfSignature(
//Create a certificate instance from the PFX file with a private key.
// Create a certificate instance from the PFX file with a private key.
certificate: PdfCertificate(certificateBytes, 'password123'),
contactInfo: 'johndoe@owned.us',
locationInfo: 'Honolulu, Hawaii',
reason: 'I am author of this document.',
reason: 'I am the author of this document.',
digestAlgorithm: DigestAlgorithm.sha256,
cryptographicStandard: CryptographicStandard.cms));

//Get the signature field appearance graphics.
// Get the signature field appearance graphics.
PdfGraphics? graphics = signatureField.appearance.normal.graphics;

//Draw the signature image in the PDF page.
// Draw the signature image on the PDF page.
graphics?.drawImage(PdfBitmap(bytes!.buffer.asUint8List()),
const Rect.fromLTWH(0, 0, 250, 200));

//Add a signature field to the form.
// Add a signature field to the form.
document.form.fields.add(signatureField);

_documentBytes = Uint8List.fromList(document.saveSync());
document.dispose();
setState(() {});
}

//Clear the signature in the SfSignaturePad.
// Clear the signature in the SfSignaturePad.
void _handleClearButtonPressed() {
_signaturePadGlobalKey.currentState!.clear();
}
Expand All @@ -114,7 +114,7 @@ class _MyHomePageState extends State<_MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('PDF Viewer with Signature pad'),
title: const Text('PDF Viewer with Signature Pad'),
),
body: Column(
children: [
Expand Down Expand Up @@ -154,7 +154,7 @@ class _MyHomePageState extends State<_MyHomePage> {
child: ElevatedButton(
onPressed: _handleSigningProcess,
child:
const Text('Add signature and load the document'),
const Text('Add Signature and Load the Document'),
),
),
ElevatedButton(
Expand All @@ -174,6 +174,6 @@ class _MyHomePageState extends State<_MyHomePage> {
{% endhighlight %}
{% endtabs %}

![PDF Viewer with Signature pad](images/pdfviewer-with-signaturepad.jpg)
![PDF Viewer with Signature Pad](images/pdfviewer-with-signaturepad.jpg)

To know more about adding a digital signature to a PDF document, please refer [here](https://help.syncfusion.com/flutter/pdf/working-with-digital-signature).
To learn more about adding a digital signature to a PDF document, please refer [here](https://help.syncfusion.com/flutter/pdf/working-with-digital-signature).
8 changes: 4 additions & 4 deletions .../pdf-viewer/How-to/Resolve-Library-not-loaded-rpath-libswiftCore-dylib-error.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ control: SfPdfViewer
documentation: ug
---

# How to resolve "Library not loaded: @rpath/libswiftCore.dylib" error?
# How to Resolve "Library not loaded: @rpath/libswiftCore.dylib" Error?

The Syncfusion<sup>&reg;</sup> Flutter PDF Viewer is a [FFI plugin](https://docs.flutter.dev/packages-and-plugins/developing-packages#types) that uses native code to render the PDF pages. **Java** code is used for **Android**, and **Swift** code is used for **iOS and macOS**. To run the Swift code, the runtime requires the essential Swift standard libraries present in the Runpath **“usr/lib/swift.”** If this path is missing from the **Runpath Search Paths** of the project build settings, you will face the error **"Library not loaded: @rpath/libswiftCore.dylib."**
The Syncfusion<sup>&reg;</sup> Flutter PDF Viewer is an [FFI plugin](https://docs.flutter.dev/packages-and-plugins/developing-packages#types) that uses native code to render the PDF pages. **Java** code is used for **Android**, and **Swift** code is used for **iOS and macOS**. To run the Swift code, the runtime requires the essential Swift standard libraries present in the Runpath **“usr/lib/swift.”** If this path is missing from the **Runpath Search Paths** of the project build settings, you will face the error **"Library not loaded: @rpath/libswiftCore.dylib."**

Usually, the **"usr/lib/swift"** path will be added automatically to the **Runpath Search Paths** when you add the Syncfusion<sup>&reg;</sup> Flutter PDF Viewer (SfPdfViewer) package and build the application. But in some cases, due to the machine-specific environment, this path doesn't get added, and so this issue occurs.
Usually, the **"usr/lib/swift"** path will be added automatically to the **Runpath Search Paths** when you add the Syncfusion<sup>&reg;</sup> Flutter PDF Viewer (SfPdfViewer) package and build the application. But in some cases, due to the machine-specific environment, this path doesn't get added, and so this issue occurs.

To overcome this issue, you are suggested to add the **"usr/lib/swift"** path to the **Runpath Search Paths** manually in the project build settings. Find and edit the **Runpath Search Paths** option by opening the project in the **XCode** and then going to **Build Settings -> Linking -> Runpath Search Paths**. Please find the Runpath search path option screenshot in the following project build settings.
To overcome this issue, you are suggested to add the **"usr/lib/swift"** path to the **Runpath Search Paths** manually in the project build settings. Find and edit the **Runpath Search Paths** option by opening the project in **XCode** and then going to **Build Settings -> Linking -> Runpath Search Paths**. Please find the Runpath search path option screenshot in the following project build settings.

![XCode Runpath Search Paths](images/xcode-runpath-search-paths.jpg)
44 changes: 22 additions & 22 deletions Flutter/pdf-viewer/How-to/custom-widget-on-flutterflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ documentation: ug
keywords: flutter pdf viewer, flutter view pdf, pdf viewer in flutter, flutter open pdf, flutter pdf view
---

# How to add Syncfusion<sup>&reg;</sup> PDF Viewer widget in FlutterFlow?
# How to Add Syncfusion<sup>&reg;</sup> PDF Viewer Widget in FlutterFlow?

## Overview

[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfPdfViewer widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard).
[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate the SfPdfViewer widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard).

### Create a new project
### Create a New Project

Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) and click the `+ Create New` button to create a new project.

### Creating the custom widget
### Creating the Custom Widget

1. Navigate to the `Custom Code` section in the left side navigation menu.
1. Navigate to the `Custom Code` section in the left-side navigation menu.
2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`.
3. Update the widget name as desired.
4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[</>]`.
Expand All @@ -29,36 +29,36 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

![Custom Widget](images/custom-widget.png)

### Add PDF Viewer widget as a dependency
### Add PDF Viewer Widget as a Dependency

1. Click on `+ Add Dependency`, a text editor will appear.
2. Navigate to [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
2. Navigate to [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) on [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
![Version](images/copy-version.png)
3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it.
3. Paste the copied dependency into the text editor, then click `Refresh` and `Save`.

>**Note**: The live version of [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
>**Note**: The live version of [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) has been migrated to the latest version of the Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).

![Dependency](images/dependency.png)

>**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`.

>**Note**: Since [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) depends on the [Syncfusion<sup>&reg;</sup> Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above.

### Import the package
### Import the Package

1. Navigate to the `Installing` tab on the [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) page. Under the `Import it` section, copy the package import statement.
![Package](images/copy-package.png)
2. Paste the copied import statement into the code editor and then `Save` it.
2. Paste the copied import statement into the code editor and then `Save`.
![Import](images/import-package-flutterflow.png)

### Add widget code snippet in code editor
### Add Widget Code Snippet in Code Editor

1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_PdfViewer/example) tab in [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) and copy the widget specific codes.
1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_PdfViewer/example) tab in [Syncfusion<sup>&reg;</sup> Flutter PDF Viewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) and copy the widget-specific codes.
![Code](images/code-snippet.png)
2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it.
2. Paste the copied code sample into the code editor, click `Format Code`, and `Save`.
![Code snippet](images/Adding-code-snippent.png)

### Compiling the codes
### Compiling the Codes

1. Click the 'Compile Code' button located in the top right corner.
2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process.
Expand All @@ -67,7 +67,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

>**Note**: The compilation progress takes 2 to 3 minutes to complete.

### Create Custom Action to import pdf.js script
### Create Custom Action to Import pdf.js Script

1. Click the `+ Add` button to open a dropdown menu, then select `Action`.
2. Update the action name as desired, say `importPdfjsScript`.
Expand Down Expand Up @@ -101,20 +101,20 @@ Future importPdfjsScript() async {

![Custom Action](images/custom-action.png)

### Utilizing the custom action
### Utilizing the Custom Action

1. Click on main.dart file under Custom Files section.
1. Click on the main.dart file under the Custom Files section.
2. Add the `importPdfjsScript` action as Initial Action.
3. Save the file.

![main.dart](images/add-custom-action.png)

### Utilizing the custom widget
### Utilizing the Custom Widget

1. Navigate to `Widget Palette` located in the left side navigation menu.
1. Navigate to the `Widget Palette` located in the left-side navigation menu.
2. Click on the `Components` tab.
3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page.
3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget onto your page.

![Page](images/page.png)

>**Note**: Since, the SfPdfViewer depends on the pdf.js library on the web platform, the preview of the widget will not be displayed in the FlutterFlow editor. To view the widget, run the application on a web platform.
>**Note**: Since the SfPdfViewer depends on the pdf.js library on the web platform, the preview of the widget will not be displayed in the FlutterFlow editor. To view the widget, run the application on a web platform.
Loading