How to Display PDF Thumbnails in a Flutter Grid View

To display a thumbnail of the first page of a PDF in a grid in a Flutter app, you can follow these steps. We’ll create a grid view of PDF thumbnails, each rendered from the first page of different PDF files.

1. Add Dependencies: Add the pdfx package to your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  pdfx: ^3.0.1 # Check for the latest version on pub.dev

2. Import the Package: Import the necessary package in your Dart file.

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

3. Create the PDF Thumbnail Widget: Create a widget to display the PDF thumbnail.

class PdfThumbnail extends StatefulWidget {
  final String pdfPath;

  const PdfThumbnail({Key? key, required this.pdfPath}) : super(key: key);

  @override
  _PdfThumbnailState createState() => _PdfThumbnailState();
}

class _PdfThumbnailState extends State<PdfThumbnail> {
  late PdfDocument _document;
  late Future<PdfPageImage> _pageImage;

  @override
  void initState() {
    super.initState();
    _loadDocument();
  }

  void _loadDocument() async {
    _document = await PdfDocument.openFile(widget.pdfPath);
    _pageImage = _document.getPage(1).then((page) => page.render(
      width: page.width,
      height: page.height,
      format: PdfPageImageFormat.png,
    ));
    setState(() {});
  }

  @override
  void dispose() {
    _document.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<PdfPageImage>(
      future: _pageImage,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasData) {
            return Image.memory(snapshot.data!.bytes, fit: BoxFit.cover);
          } else {
            return Center(child: Text('Failed to load PDF page'));
          }
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

4. Create a Grid View of Thumbnails: Create a grid view to display multiple PDF thumbnails.

class PdfGrid extends StatelessWidget {
  final List<String> pdfPaths;

  const PdfGrid({Key? key, required this.pdfPaths}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1.0,
      ),
      itemCount: pdfPaths.length,
      itemBuilder: (context, index) {
        return PdfThumbnail(pdfPath: pdfPaths[index]);
      },
    );
  }
}

5. Usage: Use the PdfGrid widget in your app by providing a list of PDF file paths.

class MyApp extends StatelessWidget {
  final List<String> pdfPaths = [
    'path/to/your/first/pdf/file.pdf',
    'path/to/your/second/pdf/file.pdf',
    // Add more PDF paths as needed
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PDF Thumbnails Grid Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: PdfGrid(pdfPaths: pdfPaths),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

This will display a grid of PDF thumbnails, each showing the first page of the respective PDF files. You can customize the grid layout by adjusting the SliverGridDelegateWithFixedCrossAxisCount parameters.

Conclusion

In this article, we have walked through the steps to display PDF thumbnails in a Flutter grid view. By leveraging the pdfx package, we can efficiently render the first page of PDF files as images and present them in a visually appealing grid layout. This approach is highly customizable, allowing you to adjust the grid's appearance and functionality to suit your specific needs. Whether you're building a document viewer or a file management app, displaying PDF thumbnails enhances the user experience by providing quick visual references. With Flutter's powerful UI capabilities, you can seamlessly integrate PDF thumbnails into your applications, offering both functionality and aesthetic appeal.