Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing Syncfusion PDF Viewer Widget for Flutter

Introducing Syncfusion PDF Viewer Widget for Flutter

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 and iOS platforms. This PDF Viewer widget for Flutter is now available in our 2020 Volume 3 release.

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.

Virtual scrolling

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.

Virtual Scrolling in Flutter PDF Viewer
Virtual Scrolling in Flutter PDF Viewer

Magnification

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.

Page Navigation in Flutter PDF Viewer
Page Navigation in Flutter PDF Viewer

Bookmark navigation

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.

Bookmark Navigation in Flutter PDF Viewer
Bookmark Navigation in Flutter PDF Viewer

Theming

Easily switch between light and dark themes in the Flutter PDF Viewer widget.

PDF Viewer Dark Theme
PDF Viewer Dark Theme

Localization

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.

Localization Support in Flutter PDF Viewer
Localization Support in Flutter PDF Viewer

Getting started with the PDF Viewer widget

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.

Step 1: Create a basic Flutter application

Create a simple project using the instructions provided in the Get started with your first Flutter app documentation.

Step 2: Add the dependency

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.

Step 3: Get the packages

Run the following command to get the required packages to use the PDF Viewer.

$ flutter pub get

Step 4: Import the package

Import the following package in your Dart code.

   
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

Step 5: Initialize the PDF Viewer

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:

  • Asset
  • Network
  • File
  • Memory

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')));
}

You can find a Flutter PDF Viewer widget sample project at this GitHub location. On executing the sample, you will get the output shown in the following screenshot.

PDF Viewer Loaded with Document from URL
PDF Viewer Loaded with Document from URL

To learn more about customizing the PDF Viewer’s features, refer to this documentation.

Creating a custom toolbar

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 sample, we will get output like what is shown in the following screenshot.

PDF Viewer with Custom Toolbar
PDF Viewer with Custom Toolbar

Coming soon

We are currently working on providing the following features for the PDF Viewer in our upcoming releases:

  • Built-in Toolbar
  • Text Search
  • Text Selection
  • RTL
  • Accessibility

Conclusion

I hope you enjoyed learning about the new Syncfusion Flutter PDF Viewer widget and its features. This widget is available in the 2020 Volume 3 release. 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top