Plugin renamed and republished as [pdfx]

[pdfx on](

Some smaller api changes


  1. Replace dependencies
-   native_pdf_view: ^4.0.1
+   pdfx: ^1.0.0
  1. Renamed PdfPageFormat -> PdfPageImageFormat
  2. Re-case values PdfPageImageFormat{JPEG,PNG,WEBP} -> PdfPageImageFormat{jpeg,png,webp}


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



Getting Started

pub package

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)

// From file (Android, Ios, MacOs)

// 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



documentThe document to be displayed-
initialPageThe page to show when first creating the PdfView1
viewportFractionThe fraction of the viewport that each page should occupy.1.0


controllerPages control. See page control and additional pdf info-
onPageChangedCalled whenever the page in the center of the viewport changes. See Document callbacks-
onDocumentLoadedCalled when a document is loaded. See Document callbacks-
onDocumentErrorCalled when a document loading error. Exception is passed in the attributes-
documentLoaderWidget showing when pdf document loadingSizedBox()
pageLoaderWidget showing when pdf page loadingSizedBox()
builderCallback called to render a widget for each page. See custom page builderDefault builder
errorBuilderShow document loading error message inside PdfViewCentered error text
rendererCustom PdfRenderer library options. See custom renderer optionswidth: page.width * 2
height: page.height * 2
format: PdfPageFormat.JPEG
backgroundColor: '#ffffff'
scrollDirectionPage turning directionAxis.horizontal
physicsHow the widgets should respond to user input-
pageSnappingSet to false for mouse wheel scroll on webtrue

Additional examples

Open another document


Page control:

// Jump to specified page

// 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;

// Count of all pages in document

Document callbacks

int _actualPageNumber = 0, _allPagesCount = 0;

  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

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

Custom page builder:

  controller: pdfController,
  pageBuilder: (
    Future<PdfPageImage> pageImage,
    int index,
    PdfDocument document,
  ) => PhotoViewGalleryPageOptions(
      imageProvider: PdfPageImageProvider(
      minScale: PhotoViewComputedScale.contained * 1,
      maxScale: PhotoViewComputedScale.contained * 3.0,
      initialScale: PhotoViewComputedScale.contained * 1.0,
      heroAttributes: PhotoViewHeroAttributes(tag: '${}-$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