Generating and Reading PDF Files in Flutter

Flutter is a powerful framework for building cross-platform mobile applications. With the ‘pdf’ package and the ‘file_picker’ package, we can create a Flutter app that allows users to select a PDF file from their local storage and view it using a PDF viewer. In this article, we will explore how to build such an app step by step.

Step 1: Open the project in your preferred code editor and add the necessary dependencies to the ‘pubspec.yaml’ file:

dependencies:
  flutter:
    sdk: flutter
  pdf: ^3.5.0
  file_picker: ^4.0.0

Save the file and run the following command in the terminal to fetch the packages:

flutter pub get

Step 2: Implementing the PDF Viewer App: Now, let’s implement the PDF viewer app. Open the ‘lib/main.dart’ file and replace the existing code with the following:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pdfWidgets;
import 'package:pdf/widgets.dart' show PdfViewerController;
import 'package:file_picker/file_picker.dart';

void main() {
  runApp(PDFViewerApp());
}

class PDFViewerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PDF Viewer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PDFViewerPage(),
    );
  }
}

class PDFViewerPage extends StatefulWidget {
  @override
  _PDFViewerPageState createState() => _PDFViewerPageState();
}

class _PDFViewerPageState extends State<PDFViewerPage> {
  PdfViewerController _pdfViewerController = PdfViewerController();

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

    if (result != null) {
      File file = File(result.files.single.path!);
      pdfWidgets.Document pdfDocument = await pdfWidgets.Document.load(file.path);
      _pdfViewerController = PdfViewerController();

      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('PDF Viewer'),
            content: Container(
              height: 400,
              child: pdfWidgets.PdfViewer(
                document: pdfDocument,
                controller: _pdfViewerController,
              ),
            ),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('Close'),
              ),
            ],
          );
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _pickAndOpenPdf,
          child: Text('Select and Open PDF'),
        ),
      ),
    );
  }
}

Step 3: Running the PDF Viewer App: Save the changes and run the app using the command:

flutter run

Now, the app should launch in the simulator or on a physical device. When you tap the “Select and Open PDF” button, the file picker will open, allowing you to choose a PDF file from your local storage. Once a file is selected, the app will display an alert dialog with the PDF viewer, showing the contents of the selected PDF file.

In this article, we learned how to create a PDF viewer app in Flutter using the ‘pdf’ package and the ‘file_picker’ package. We implemented the app step by step, enabling users to select a PDF file from their local storage and view it using a PDF viewer. You can further enhance the app by adding features like navigation, zooming, or bookmarking.

Remember to handle error cases, implement proper error handling, and consider user experience when developing your own PDF viewer app using the ‘pdf’ package and FilePicker in Flutter.

References:

• pdf package: https://pub.dev/packages/pdf
• file_picker package: https://pub.dev/packages/file_picker

Please note that the code provided is for illustrative purposes, and you may need to customize it based on your specific requirements and design preferences.

With this app, users will be able to conveniently select and view PDF files from their local storage using the Flutter framework.