How to add Syncfusion PdfViewer widget in FlutterFlow?

30 Jul 20244 minutes to read

Overview

FlutterFlow 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 widget collection. This article explains how to incorporate our SfPdfViewer widget as a custom widget in FlutterFlow.

Create a new project

Navigate to the FlutterFlow dashboard and click the + Create New button to create a new project.

Creating the custom widget

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 [</>].
5. A popup will appear with startup code; locate the button labeled </> Copy to Editor and click on it.
6. Save the widget.

Add PdfViewer widget as a dependency

1. Click on + Add Dependency, a text editor will appear.
2. Navigate to Syncfusion Flutter PdfViewer in pub.dev and copy the dependency name and version using the Copy to Clipboard option.
   
3. Paste the copied dependency into the text editor, then click Refresh and Save it.

Note: The live version of Syncfusion Flutter PdfViewer has been migrated to the latest version of Flutter SDK. To ensure compatibility, check FlutterFlow’s current Flutter version and obtain the corresponding version of Syncfusion Flutter PdfViewer by referring to the SDK compatibility.

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 Flutter PdfViewer depends on the Syncfusion Flutter Core package, make sure to add it as a dependency following the same steps mentioned above.

Import the package

1. Navigate to the Installing tab on the Syncfusion Flutter PdfViewer page. Under the Import it section, copy the package import statement.
   
2. Paste the copied import statement into the code editor and then Save it.
   

Add widget code snippet in code editor

1. Navigate to the Example tab in Syncfusion Flutter PdfViewer and copy the widget specific codes.
   
2. Paste the copied code sample into the code editor, click Format Code, and Save it.
   

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.

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

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.
3. Add the below action code to import the pdf.js script.

DART

import 'package:flutter/foundation.dart';
import 'package:web/web.dart' as web;

Future importPdfjsScript() async {
  // Check if the platform is web
  if (!kIsWeb) return;
  // Create a script element to import pdf.js library
  final script = web.document.createElement('script') as web.HTMLScriptElement
    ..type = 'text/javascript'
    ..charset = 'utf-8'
    ..async = true
    ..src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js';
  // Add the script to the head tag
  web.document.querySelector('head')!.appendChild(script);
  await script.onLoad.first.timeout(const Duration(seconds: 10));
}

1. Save the action.
2. Compile the code.

Utilizing the custom action

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

Utilizing the custom widget

1. Navigate to 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.

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.