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

Be First to Comment