Flutter : Read PDF File Internally without External Viewer

This tutorial shows you how to create a simple PDF reader inside the flutter app without using any external PDF viewer. There are many methods for this, but several do not work, and this works well if you follow all the steps.

Table of Contents

1. Add pdf_flutter Package

Simply add latest version of pdf_flutter package on your app’s pubspec.yaml file.

pdf_flutter: ^1.1.4

2. Set the PDF file on your assets and Import

Place the pdf file on your flutter app directory, inside a separate folder and import the directory on flutter as an asset. Here we place a pdf file named ‘sample.pdf’ on directory ‘files’.

  assets:
    - files/

3. Change minimum SDK version

This package need minimum SDK version of 2.1.0 (Does not work with 2.12.0)

environment:
  sdk: ">=2.1.0 <3.0.0"

Overall changes in pubspec.yaml

4. Create a Screen for PDF Viewer

As we mention above, we read PDF inside the app without any external PDF reader. So may create an additional screen to view the PDF content.

You can create a new screen as separate dart file or inside the existing dart file. If you are using a separate file, then you might to pass the file name from a screen to the PDF reader screen.

Note: You can use a existing screen for PDF viewer screen as a test.

5. Use Package to the App

To use the package, you need to import the package to your PDF reader dart file.

import 'package:pdf_flutter/pdf_flutter.dart';

6. Read the PDF

You can simply read the pdf file from asset (files/sample.pdf) by below code.

PDF.asset("files/sample.pdf",
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
              ),

Where PDF reader width and height are the width and height of your device size respectively.

7. Complete Code

Without an additional Screen

import 'package:flutter/material.dart';
import 'package:pdf_flutter/pdf_flutter.dart';

void main()
{
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("My Flutter App"),
        ),
        body: Container(
            child:
            Center(
              child:   PDF.asset("files/sample.pdf",
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
              ),
            )
        )
    );
  }
}

As a separate Screen for PDF reader:

import 'package:flutter/material.dart';
import 'package:pdf_flutter/pdf_flutter.dart';

void main()
{
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("My Flutter App"),
        ),
        body: Container(
            child:
            Center(
              child:  TextButton(
                child: Text("Open the PDF file"),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) =>
                            PDFScreen(),
                      ));
                },
              ),
            )
        )
    );
  }
}
class PDFScreen extends StatefulWidget {
  @override
  _PDFScreenState createState() => _PDFScreenState();
}

class _PDFScreenState extends State<PDFScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("PDF Title"),
        ),
        body: Container(
            child:
            Center(
              child:   PDF.asset("files/sample.pdf",
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
              ),

            )
        )
    );
  }
}

8. Output