Skip to content

Commit 3fd8dfe

Browse files
authored
Merge pull request #1232 from syncfusion-content/FLUT-959344-pdfviewer
FLUT-959344: Checked grammar for Flutter PDF viewer files
2 parents 9163b11 + 4beee99 commit 3fd8dfe

34 files changed

+411
-420
lines changed

Flutter/pdf-viewer/How-to/Add-SignaturePad-signatures-to-Syncfusion-Flutter-PdfViewer.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ control: SfPdfViewer
77
documentation: ug
88
---
99

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

12-
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).
12+
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).
1313

14-
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.
14+
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.
1515

1616
{% tabs %}
1717
{% highlight Dart %}
@@ -61,9 +61,9 @@ class _MyHomePageState extends State<_MyHomePage> {
6161
setState(() {});
6262
}
6363

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

75-
//Load the document
75+
// Load the document
7676
PdfDocument document = PdfDocument(inputBytes: documentBytes);
7777

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

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

93-
//Get the signature field appearance graphics.
93+
// Get the signature field appearance graphics.
9494
PdfGraphics? graphics = signatureField.appearance.normal.graphics;
9595

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

100-
//Add a signature field to the form.
100+
// Add a signature field to the form.
101101
document.form.fields.add(signatureField);
102102

103103
_documentBytes = Uint8List.fromList(document.saveSync());
104104
document.dispose();
105105
setState(() {});
106106
}
107107

108-
//Clear the signature in the SfSignaturePad.
108+
// Clear the signature in the SfSignaturePad.
109109
void _handleClearButtonPressed() {
110110
_signaturePadGlobalKey.currentState!.clear();
111111
}
@@ -114,7 +114,7 @@ class _MyHomePageState extends State<_MyHomePage> {
114114
Widget build(BuildContext context) {
115115
return Scaffold(
116116
appBar: AppBar(
117-
title: const Text('PDF Viewer with Signature pad'),
117+
title: const Text('PDF Viewer with Signature Pad'),
118118
),
119119
body: Column(
120120
children: [
@@ -154,7 +154,7 @@ class _MyHomePageState extends State<_MyHomePage> {
154154
child: ElevatedButton(
155155
onPressed: _handleSigningProcess,
156156
child:
157-
const Text('Add signature and load the document'),
157+
const Text('Add Signature and Load the Document'),
158158
),
159159
),
160160
ElevatedButton(
@@ -174,6 +174,6 @@ class _MyHomePageState extends State<_MyHomePage> {
174174
{% endhighlight %}
175175
{% endtabs %}
176176

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

179-
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).
179+
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).

Flutter/pdf-viewer/How-to/Resolve-Library-not-loaded-rpath-libswiftCore-dylib-error.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ control: SfPdfViewer
77
documentation: ug
88
---
99

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

12-
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."**
12+
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."**
1313

14-
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.
14+
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.
1515

16-
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.
16+
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.
1717

1818
![XCode Runpath Search Paths](images/xcode-runpath-search-paths.jpg)

Flutter/pdf-viewer/How-to/custom-widget-on-flutterflow.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ documentation: ug
88
keywords: flutter pdf viewer, flutter view pdf, pdf viewer in flutter, flutter open pdf, flutter pdf view
99
---
1010

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

1313
## Overview
1414

15-
[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).
15+
[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).
1616

17-
### Create a new project
17+
### Create a New Project
1818

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

21-
### Creating the custom widget
21+
### Creating the Custom Widget
2222

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

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

32-
### Add PDF Viewer widget as a dependency
32+
### Add PDF Viewer Widget as a Dependency
3333

3434
1. Click on `+ Add Dependency`, a text editor will appear.
35-
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.
35+
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.
3636
![Version](images/copy-version.png)
37-
3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it.
37+
3. Paste the copied dependency into the text editor, then click `Refresh` and `Save`.
3838

39-
>**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).
39+
>**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).
4040
4141
![Dependency](images/dependency.png)
4242

4343
>**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`.
4444
4545
>**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.
4646
47-
### Import the package
47+
### Import the Package
4848

4949
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.
5050
![Package](images/copy-package.png)
51-
2. Paste the copied import statement into the code editor and then `Save` it.
51+
2. Paste the copied import statement into the code editor and then `Save`.
5252
![Import](images/import-package-flutterflow.png)
5353

54-
### Add widget code snippet in code editor
54+
### Add Widget Code Snippet in Code Editor
5555

56-
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.
56+
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.
5757
![Code](images/code-snippet.png)
58-
2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it.
58+
2. Paste the copied code sample into the code editor, click `Format Code`, and `Save`.
5959
![Code snippet](images/Adding-code-snippent.png)
6060

61-
### Compiling the codes
61+
### Compiling the Codes
6262

6363
1. Click the 'Compile Code' button located in the top right corner.
6464
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.
@@ -67,7 +67,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
6767

6868
>**Note**: The compilation progress takes 2 to 3 minutes to complete.
6969
70-
### Create Custom Action to import pdf.js script
70+
### Create Custom Action to Import pdf.js Script
7171

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

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

104-
### Utilizing the custom action
104+
### Utilizing the Custom Action
105105

106-
1. Click on main.dart file under Custom Files section.
106+
1. Click on the main.dart file under the Custom Files section.
107107
2. Add the `importPdfjsScript` action as Initial Action.
108108
3. Save the file.
109109

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

112-
### Utilizing the custom widget
112+
### Utilizing the Custom Widget
113113

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

118118
![Page](images/page.png)
119119

120-
>**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.
120+
>**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.

0 commit comments

Comments
 (0)