We come across multiple PDFs in our daily lives, and while making an app, you would surely want to implement this feature in your app. Or you would want some new feature in your PDF reader and this is a great place to start to make your first PDF Reader App.

In this tutorial, we will learn to make a PDF Reader app using Flutter Framework.

Install Packages

Create a new project or in your existing project, install the following plugins:

flutter_pdfview: ^1.3.2
file_picker: ^8.0.0+1

• flutter_pdfview: It is a native PDF viewer for Android and IOS. It is simple and easy-to-use PDF package.

• file_picker: This is used for picking up the PDF file from the device storage.

Add Storage Permission in Android Manifest File

I am testing on an Android device hence providing the guide for Android. Add the following line inside the manifest declaration as follows:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    ....
</manifest>

You can perform similarly for IOS devices if required.

Create a File Picker

Before viewing the PDF file, let us create a File Picker system. So we use the file_picker plugin. So we will use the pickFiles() method and provide the type as PDF since we will pick PDFs only.

FilePickerResult? result = await FilePicker.platform.pickFiles(
  type: FileType.custom,
  allowedExtensions: ['pdf'],
);

The result is stored in FilePickerResult object which can be null since the user may decide not to pick up any file.

Then we check if the result is null or not. If not, we display the PDF. The implementation is as follows:

if (result != null) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) =>
          ViewPDFScreen(pdfPath: result.files.single.path!),
    ),
  );
}

We can fetch the resulting PDF path by getting the first file path. Since it can be null, we add the exclamation (!) mark for null safety.

We will call the method whenever a button is pressed. Here is the code for it:

Future<void> _openFilePicker(BuildContext context) async {
  try {
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['pdf'],
    );

    if (result != null) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) =>
              ViewPDFScreen(pdfPath: result.files.single.path!),
        ),
      );
    } else {
      // show a suitable notificatoin
    }
  } catch (e) {
    // catch error; debug the message
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () async {
              await _openFilePicker(context);
            },
            child: const Text('Pick a PDF file'),
          ),
        ],
      ),
    ),
  );
}

Now we will be defining the ViewPDFScreen widget. It is responsible for displaying the whole PDF.

Create PDF Viewer Page

Now we will create our PDF viewer page. PDFView page is defined in the flutter_pdfview package and we will be using it as follows:

PDFView(
  filePath: pdfPath,
  defaultPage: 0,
),

The PDF path is provided in the pdfPath variable. It is common to display a PDF name. But to get the PDF name, we need to extract it from the path itself. The path is something as follows:

So we can split the path based on (/) and then take the last as the PDF name. The implementation contains the PDF name in the AppBar:

appBar: AppBar(
  title: Text(pdfPath.split('/').last),
),

Here is the full code for the ViewPDFScreen widget.

class ViewPDFScreen extends StatelessWidget {
  const ViewPDFScreen({super.key, required this.pdfPath});
  final String pdfPath;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(pdfPath.split('/').last),
      ),
      body: PDFView(
        filePath: pdfPath,
        defaultPage: 0,
      ),
    );
  }
}

Output

Here is the full code