How to build and deploy an application with Flutter PDF Viewer in FlutLab?

This article explains the process of building and deploying a Flutter application with Flutter PDF Viewer in FlutLab.

The Syncfusion Flutter PDF Viewer widget enables loading PDF documents from various sources, including Asset, Network, File, and Memory. In this article, we’ll focus on utilizing the SfPdfViewer.network to load a PDF document.

Step 1: Create an Account on FlutLab

Visit the FlutLab website and click on the “Get Started” button to create your account.

After logging in, you will be directed to a dashboard site to view your workspace about the projects.

Step 2: Create a new project

Click on the “Create Project” button then select a Flutter template and choose a name for your project.

NOTE:

Since SfPdfViewer is supported only in the latest Flutter SDK, we’re changing the Flutter version to 3.41 in FlutLab which is the latest version support in FlutLab as of July 2026.

Step 3: Set up SfPdfViewer Dependency

First, create a new Flutter app and open the pubspec.yaml file in your Flutter project and under the dependencies section, add the SfPdfViewer package. Since FLUTLab supports Flutter SDK versions up to 3.41, it is recommended to use the 31.x version of the syncfusion_flutter_pdfviewer package.

dependencies:
 flutter:
   sdk: flutter
 syncfusion_flutter_pdfviewer: ^31.2.18  

Run “pub get” to save the changes made to the pubspec.yaml file and install the package dependencies.

NOTE:

For the web platform, we have used PdfJs for rendering the PDF pages, so the script file must be referred to in your web/index.html file.
On your web/index.html file, add the following script tags, somewhere in the head or body of the document:

<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script type="text/javascript">
  pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
</script> 

Step 4: Import the necessary packages

Import the below package in main.dart file.

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart'; 

Step 5: Loading the document from the network

The SfPdfViewer.network creates a widget that displays the PDF document obtained from a URL. The following code example explains the same.

@override
Widget build(BuildContext context) {
 return Scaffold(
     body: SfPdfViewer.network(
             'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf'));
} 

Step 6: Build the application

To compile your project, select “Build” and choose the “Web Emulator” option to preview your application within FlutLab’s integrated web emulator.

Finally, we can view the application running seamlessly in the web emulator.

Conclusion

We hope you found this article helpful in learning how to build and deploy a Flutter application with the Syncfusion Flutter PDF Viewer on FlutLab.
You can refer to our Flutter PDF Viewer feature tour page to learn about its other groundbreaking feature representations.
Additionally, our documentation is available to help you quickly get started and understand the various features in detail.
If you have any questions or need further assistance, please feel free to reach out to us through our support forums, BoldDesk, or feedback portal.