native_pdf_view 6.0.0+1

Flutter plugin to render PDF files on Web, MacOS, Windows, Android and iOS.

Plugin renamed and republished as [pdfx]

[pdfx] on pub.dev

Some smaller api changes

Migration:

1. Replace dependencies

dependencies:
-   native_pdf_view: ^4.0.1
+   pdfx: ^1.0.0

2. Renamed PdfPageFormat -> PdfPageImageFormat
3. Re-case values PdfPageImageFormat{JPEG,PNG,WEBP} -> PdfPageImageFormat{jpeg,png,webp}

native_pdf_view

Flutter Plugin to render PDF and show a PDF file on Web, MacOs 10.11+, Android 5.0+, iOS and Windows.

Showcase

Live	Screenshot

Getting Started

In your flutter project add the dependency:

flutter pub add native_pdf_view

For web run tool for automatically add pdfjs library in index.html:

flutter pub run native_pdf_view:install_web

For windows run tool automatically add override for pdfium version property in CMakeLists.txt file:

flutter pub run native_pdf_view:install_web

Usage example

It very simple!

import 'package:native_pdf_view/native_pdf_view.dart';

final pdfController = PdfController(
  document: PdfDocument.openAsset('assets/sample.pdf'),
);

Widget pdfView() => PdfView(
  controller: pdfController,
);

Package usage [pdf_renderer] and supports her api:

Local document open:

// From assets (Android, Ios, MacOs, Web)
PdfDocument.openAsset('assets/sample.pdf')

// From file (Android, Ios, MacOs)
PdfDocument.openFile('path/to/file/on/device')

// From data (Android, Ios, MacOs, Web)
PdfDocument.openData((FutureOr<Uint8List>) data)

Network document open:

Install [network_file] package (supports all platforms):

flutter pub add internet_file

Api

PdfController

Parameter	Description	Default
document	The document to be displayed	-
initialPage	The page to show when first creating the [PdfView]	1
viewportFraction	The fraction of the viewport that each page should occupy.	1.0

PdfView

Parameter	Description	Default
controller	Pages control. See page control and additional pdf info	-
onPageChanged	Called whenever the page in the center of the viewport changes. See Document callbacks	-
onDocumentLoaded	Called when a document is loaded. See Document callbacks	-
onDocumentError	Called when a document loading error. Exception is passed in the attributes	-
documentLoader	Widget showing when pdf document loading	SizedBox()
pageLoader	Widget showing when pdf page loading	SizedBox()
builder	Callback called to render a widget for each page. See custom page builder	Default builder
errorBuilder	Show document loading error message inside PdfView	Centered error text
renderer	Custom PdfRenderer library options. See custom renderer options	width: page.width * 2 height: page.height * 2 format: PdfPageFormat.JPEG backgroundColor: '#ffffff'
scrollDirection	Page turning direction	Axis.horizontal
physics	How the widgets should respond to user input	-
pageSnapping	Set to false for mouse wheel scroll on web	true

Additional examples

Open another document

pdfController.openDocument(PdfDocument.openAsset('assets/sample.pdf'));

Page control:

// Jump to specified page
pdfController.jumpTo(3);

// Animate to specified page
_pdfController.animateToPage(3, duration: Duration(milliseconds: 250), curve: Curves.ease);

// Animate to next page 
_pdfController.nextPage(duration: Duration(milliseconds: 250), curve: Curves.easeIn);

// Animate to previous page
_pdfController.previousPage(duration: Duration(milliseconds: 250), curve: Curves.easeOut);

Additional pdf info:

// Actual showed page
pdfController.page;

// Count of all pages in document
pdfController.pagesCount;

Document callbacks

int _actualPageNumber = 0, _allPagesCount = 0;

PdfView(
  controller: pdfController,
  onDocumentLoaded: (document) {
    setState(() {
      _allPagesCount = document.pagesCount;
    });
  },
  onPageChanged: (page) {
    setState(() {
      _actualPageNumber = page;
    });
  },
);

/// Now you can use these values to display the reading status of the document.
Text('Read: $_actualPageNumber of $_allPagesCount');

Custom renderer options

PdfView(
  controller: pdfController,
  renderer: (PdfPage page) => page.render(
    width: page.width * 2,
    height: page.height * 2,
    format: PdfPageFormat.JPEG,
    backgroundColor: '#FFFFFF',
  ),
);

Custom page builder:

PdfView(
  controller: pdfController,
  document: snapshot.data,
  pageBuilder: (
    Future<PdfPageImage> pageImage,
    int index,
    PdfDocument document,
  ) => PhotoViewGalleryPageOptions(
      imageProvider: PdfPageImageProvider(
        pageImage,
        index,
        document.id,
      ),
      minScale: PhotoViewComputedScale.contained * 1,
      maxScale: PhotoViewComputedScale.contained * 3.0,
      initialScale: PhotoViewComputedScale.contained * 1.0,
      heroAttributes: PhotoViewHeroAttributes(tag: '${document.id}-$index'),
    ),
);

Rendering additional info

On Web

This plugin uses the PDF.js

On Android

This plugin uses the Android native PdfRenderer

On Ios & MacOs

This plugin uses the IOS native CGPDFPage

On Windows

This plugin use PDFium