Flutter PDF Flipbook

A beautiful Flutter plugin that provides realistic book flip animations for displaying PDFs. Perfect for e-book readers, digital magazines, and any app that needs to display PDFs with engaging page-turning animations.

🌐 Live Demo

🎯 Try it here: https://flutter-pdf-flipbook.pages.dev/

🎞️ Preview

demo

Features

  • 📖 Realistic Book Flip Animation - Smooth page turning with natural book-like physics
  • 🎨 Highly Customizable - Customize colors, sizes, and styling to match your app
  • 📱 Responsive Design - Automatically adapts to different screen sizes
  • 🔍 Zoom Support - Pinch to zoom functionality for better reading experience
  • ⚡ Performance Optimized - Efficient PDF loading and caching
  • 🌐 Cross-Platform Support - Works on all Flutter platforms (Android, iOS, macOS, Windows, Linux, Web)
  • 📱 Multi-Device Support - Optimized for mobile phones, tablets, desktop, and web browsers
  • 🎯 Easy Integration - Simple widget to add to your Flutter app

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_pdf_flipbook: ^<latest_version> # Check pub.dev for the latest version

Then run:

flutter pub get

Basic Usage

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PdfBookViewer(
          pdfUrl: 'https://example.com/your-document.pdf',
        ),
      ),
    );
  }
}

That's it! The plugin will load your PDF and display it with beautiful book flip animations.

Advanced Usage

Custom Styling

PdfBookViewer(
  pdfUrl: 'https://example.com/document.pdf',
  backgroundColor: Colors.grey.shade100,
  showNavigationControls: true,
  onPageChanged: (currentPage, totalPages) {
    print('Page $currentPage of $totalPages');
  },
  onError: (String error) {
    print('PDF loading error: $error');
    // Handle error - show dialog, snackbar, etc.
  },
  style: PdfBookViewerStyle(
    backgroundColor: Colors.black,
    centerDividerColor: Colors.amber,
    loadingIndicatorColor: Colors.blue,
    centerDividerWidth: 6.0,
    navigationControlsStyle: NavigationControlsStyle(
      buttonColor: Colors.orange,
      iconColor: Colors.white,
    ),
  ),
)

CORS and Proxy Configuration

When loading PDFs from external URLs, you may encounter CORS (Cross-Origin Resource Sharing) restrictions. The plugin handles this gracefully:

  1. Direct Fetch First: The plugin always tries to fetch the PDF directly from the provided URL
  2. Proxy Fallback: If direct fetch fails due to CORS restrictions and you provide a proxyUrl, it will automatically try the proxy
  3. Clear Error Messages: If both methods fail, you'll get descriptive error messages

Using a Proxy URL

PdfBookViewer(
  pdfUrl: 'https://example.com/document.pdf',
  proxyUrl: 'https://your-worker.workers.dev?url=',
  onError: (error) {
    print('Error: $error');
    // Handle error - show dialog, snackbar, etc.
  },
)

Setting Up a Cloudflare Worker Proxy

If you need a proxy, here's a simple Cloudflare Worker example:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const targetUrl = url.searchParams.get('url')
  
  if (!targetUrl) {
    return new Response('Missing url parameter', { status: 400 })
  }
  
  try {
    const response = await fetch(targetUrl)
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET',
        'Content-Type': response.headers.get('Content-Type') || 'application/pdf'
      }
    })
  } catch (error) {
    return new Response('Proxy error: ' + error.message, { status: 500 })
  }
}

Alternative Proxy Solutions

  • Backend Proxy: Create an endpoint in your backend that fetches and serves PDFs
  • CDN Proxy: Use services like Cloudflare, AWS CloudFront, or similar
  • CORS-Enabled Server: Configure your PDF server to allow cross-origin requests

Configuration Options

PdfBookViewer Properties:

  • pdfUrl (required): The URL of the PDF document to display
  • style: Custom styling options (PdfBookViewerStyle)
  • onPageChanged: Callback when page changes (currentPage, totalPages)
  • onError: Callback when PDF loading fails (error message)
  • showNavigationControls: Whether to show navigation controls (default: true)
  • backgroundColor: Custom background color
  • proxyUrl: Optional proxy URL to bypass CORS restrictions

PdfBookViewerStyle Properties:

  • backgroundColor: Main background color
  • bookBackgroundColor: Color behind the book pages
  • centerDividerColor: Color of the center line between pages
  • centerDividerWidth: Width of the center divider (default: 5.0)
  • loadingIndicatorColor: Color of the loading indicator
  • bookContainerDecoration: Custom decoration for the book container
  • navigationControlsStyle: Styling for navigation controls
  • buttonColor: Color of navigation buttons (default: Colors.grey)
  • iconColor: Color of navigation icons (default: Colors.white)
  • shadow: Custom shadow for the navigation bar

Example App

See the example/ directory for a complete example app demonstrating all features.

Controls

  • Swipe Left/Right: Navigate between pages
  • Pinch to Zoom: Zoom in for detailed reading
  • Navigation Controls: Use the bottom navigation bar
    • Previous/Next arrows to navigate
    • Page input field to jump to specific pages
    • Search button to go to entered page

Performance Tips

  1. Network PDFs: The plugin automatically handles caching for better performance
  2. Large PDFs: Pages are loaded progressively as needed
  3. Memory Management: Closed pages are automatically cleaned up

Requirements

  • Flutter >=3.0.0
  • Dart >=3.0.0

Platform Support

Operating Systems

✅ Android - Fully supported with native PDF rendering ✅ iOS - Fully supported with native PDF rendering
✅ macOS - Fully supported with native PDF rendering ✅ Windows - Fully supported with native PDF rendering ✅ Web - Fully supported with web-based PDF rendering

Device Types

📱 Mobile Phones - Optimized touch interactions and responsive design 📱 Tablets - Enhanced for larger screens with improved navigation 💻 Desktop - Full mouse and keyboard support with precise controls 🌐 Web Browsers - Cross-browser compatibility with web-based PDF rendering

All platforms and devices support:

  • PDF loading from URLs and local assets
  • Background colors
  • Custom styling and theming
  • Book flip animations
  • Zoom functionality
  • Navigation controls
  • Error handling

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Made with ❤️ for Flutter developers

Libraries

flutter_pdf_flipbook
models/app_state
services/book_animation_controller
services/page_navigation
services/pdf_loader
widgets/animated_page
widgets/book_page
widgets/pdf_book_viewer