We deal with PDF documents on a daily basis, like invoices, business documents, and more. So having a PDF viewer on mobile phones can be a great asset!
We at Syncfusion have developed a PDF Viewer widget for the Flutter platform that allows you to view PDF documents seamlessly and efficiently on Android, iOS, Web and macOS platforms.
The PDF Viewer has the following essential features in its initial release:
Let’s look at these features and how to integrate this new PDF Viewer widget into your app.
Easily scroll through the pages in a document with a fluid experience. The pages of the PDF document are rendered only when required. This improves loading performance and reduces memory consumption.
Users can efficiently zoom in and out of the content of a PDF document. To learn more about magnification and its features, refer to this documentation.
Navigate to the desired pages in a PDF document instantly. To learn more about page navigation and its features, refer to this documentation.
Using the Flutter PDF Viewer, bookmarks in a document can be loaded and made ready for easy navigation. This feature helps you navigate to topics that are already bookmarked within the PDF document. To learn more about bookmark navigation and its features, refer to this documentation.
Select the desired text in a PDF document smoothly and precisely. To learn more about text selection and its features, refer to Text Selection in Flutter PDF Viewer documentation.
Search for text and navigate through all its occurrences in PDF document instantly. To learn more about text search and its features, refer to Text Search in Flutter PDF Viewer documentation.
Easily switch between light and dark themes in the Flutter PDF Viewer widget.
All static text within the PDF Viewer can be localized to any supported language. To learn more about localization and its features, refer to this documentation.
Now that we’ve seen some highlights of the widget, let’s cover the steps to add the Flutter PDF Viewer widget in your application and use its basic features.
Create a simple project using the instructions provided in the Get started with your first Flutter app documentation.
Add the Syncfusion Flutter PDF Viewer dependency to your pubspec.yaml file.
dependencies:
syncfusion_flutter_pdfviewer: ^xx.x.xx Note:xx.x.xx denotes the version of the Syncfusion Flutter PDF Viewer package.
For the web platform, we have used PdfJs for rendering the PDF pages, so the script file must be referred to the web/index.html.
In the web/index.html file, add the following script tags, either in the head or body tag.
<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script> <script type="text/javascript"> pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js"; </script>
Run the following command to get the required packages to use the PDF Viewer.
$ flutter pub get |
Import the following package in your Dart code.
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
After importing the package, initialize the SfPdfViewer as a child to any widget. In the following example, the SfPdfViewer widget is added as a child to the Container widget, and that displays the PDF document obtained from a URL. Several PDF Viewer constructors are provided to load the PDF document from different sources. They are:
Note: Currently, we do not support viewing encrypted (password-protected) PDF documents.
Refer to the following code example.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: SfPdfViewer.network(
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf')));
} Note: To load PDF from network using SfPdfViewer.network in macOS, network access must be enabled in your macOS application. Please refer to loading PDF from network documentation.
You can find a Flutter PDF Viewer widget sample project at this GitHub location. On executing the sample in Android and iOS platforms, you will get the output shown in the following screenshot.
To learn more about customizing the PDF Viewer’s features, refer to this documentation.
At present, we do not support a built-in toolbar in the Flutter PDF Viewer widget. However, we have provided APIs for performing magnification, page navigation, and bookmark navigation programmatically. You can design a simple custom toolbar within the AppBar and invoke these operations to provide a toolbar for your end users.
You can find a sample project of the Flutter PDF Viewer widget with a custom toolbar at this GitHub location. On executing the custom toolbar samples in different platforms, we will get output like what are shown in the following screenshots.
We are currently working on providing the following features for the PDF Viewer in our upcoming releases:
I hope you enjoyed learning about the new Syncfusion Flutter PDF Viewer widget and its features. You can find the user guide here, and you can also check out our samples in this GitHub location. Additionally, you can download and check out our demo app in Google Play and the App Store.
For current customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.
Also, if you need a new widget for the Flutter framework, or new features for our existing widgets, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!