In this tutorial, we’ll guide you through creating a cross-platform PDF viewer using Flutter. The viewer will support features like zooming, scrolling, and navigating through pages, providing a smooth user experience on both mobile and desktop platforms.

If you prefer watching a video tutorial here is a link to that.

Setting Up the Project Structure for PDF Viewer

Before we dive into the implementation details, it’s essential to ensure that your project structure is organized for managing assets like PDF files. In this project, we’ll be working with a sample PDF named example_pdf.pdf, which should be stored under the assets/pdfs/ directory.

To make sure this PDF is accessible within your Flutter app, you’ll need to declare it in your pubspec.yaml file. This step ensures that Flutter bundles the PDF file with your app during the build process.

Here’s how to configure the pubspec.yaml file:

flutter:
  assets:
    - assets/pdfs/example_pdf.pdf

Including this path in the assets section ensures that your application can locate and load the PDF file when needed. This setup is crucial for providing a seamless experience, allowing users to view the PDF directly within your app.

Initial Setup

To begin, set up a new Flutter project. We’ll be using the pdfx package to handle PDF rendering across different platforms, including mobile, web, and desktop. Add the following dependency in your pubspec.yaml file:

dependencies:
  pdfx: ^2.6.0  

This package will allow us to load, display, and interact with PDF documents easily.

To get the dependency click here.

Creating the Main Entry Point

Start by creating the main.dart file. This file serves as the entry point of your Flutter application. It initializes the app and directs it to the homepage.

import 'package:flutter/material.dart';
import 'package:flutter_pdf_viewer_tutorial/pages/home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PDF Viewer',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

Building the Home Page

The homepage is where our PDF viewer will reside. We’ll create a stateful widget that will manage the PDF document and its controls.

Setting Up the HomePage Widget

In this section, we’ll set up the basic structure of our homepage. The HomePage widget is responsible for displaying the PDF viewer and the controls for navigation.

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

Initializing the PDF Controller

Next, we’ll initialize the PdfControllerPinch, which will handle the document loading and page navigation.

class _HomePageState extends State<HomePage> {
  late PdfControllerPinch pdfControllerPinch;

  int totalPageCount = 0, currentPage = 1;

  @override
  void initState() {
    super.initState();
    pdfControllerPinch = PdfControllerPinch(
        document: PdfDocument.openAsset('assets/pdfs/example_pdf.pdf'));
  }

Building the AppBar

Let’s create an app bar with a title. This will give our app a more polished look and make it clear to users that they are viewing a PDF.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text(
        "PDF Viewer",
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      backgroundColor: Colors.red,
    ),
    body: _buildUI(),
  );
}

Creating the PDF Viewer UI

Adding Page Navigation Controls

We’ll add controls to navigate between the pages of the PDF. These controls include buttons to move to the previous or next page, as well as text displaying the current page and total pages.

Widget _buildUI() {
  return Column(
    children: [
      Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("Total Pages: ${totalPageCount}"),
          IconButton(
            onPressed: () {
              pdfControllerPinch.previousPage(
                duration: Duration(
                  milliseconds: 500,
                ),
                curve: Curves.linear,
              );
            },
            icon: Icon(
              Icons.arrow_back,
            ),
          ),
          Text("Current Page: ${currentPage}"),
          IconButton(
            onPressed: () {
              pdfControllerPinch.nextPage(
                duration: Duration(
                  milliseconds: 500,
                ),
                curve: Curves.linear,
              );
            },
            icon: Icon(
              Icons.arrow_forward,
            ),
          ),
        ],
      ),
      _pdfView(),
    ],
  );
}

Displaying the PDF Document

Finally, let’s create the PDF viewer itself. This widget will render the PDF document and handle user interactions like scrolling and zooming.

Widget _pdfView() {
  return Expanded(
    child: PdfViewPinch(
      scrollDirection: Axis.vertical,
      controller: pdfControllerPinch,
      onDocumentLoaded: (doc) {
        setState(() {
          totalPageCount = doc.pagesCount;
        });
      },
      onPageChanged: (page) {
        setState(() {
          currentPage = page;
        });
      },
    ),
  );
}

Get Source Code for free:

Conclusion

By following this guide, you’ve successfully created a PDF viewer in Flutter that can be used across multiple platforms. This application allows users to view, navigate, and interact with PDF documents easily. With the pdfx package, you’ve leveraged powerful PDF rendering capabilities, making your app versatile and user-friendly.

Happy Coding…!!!