FlipBook Pro

A Flutter package that brings Flipboard-style vertical page flip animations to your app. Create stunning split-flap display mechanics with smooth 3D perspective transformations and spring physics — all in pure Dart.

pub package License: MIT Flutter

Features

FlipBook Pro Demo
  • Flipboard-style flip animation — Realistic split-flap page transitions with 3D perspective
  • Spring physics — Natural, fluid animations powered by Flutter's physics engine
  • Gesture navigation — Intuitive swipe up/down with velocity-based completion
  • Programmatic control — Navigate pages via nextPage(), previousPage(), and currentPage
  • Loop mode — Enable infinite circular scrolling through pages
  • Highly customizable — Adjust perspective depth, animation duration, and more
  • Zero dependencies — Pure Dart implementation, no native code required
  • Cross-platform — Works on iOS, Android, Web, macOS, Windows, and Linux

Getting Started

Add flipbook_pro to your pubspec.yaml:

dependencies:
  flipbook_pro: ^1.0.2

Then run:

flutter pub get

Usage

Basic Example

import 'package:flipbook_pro/flipbook_pro.dart';

FlipboardView(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(
        child: Text(
          'Page ${index + 1}',
          style: const TextStyle(fontSize: 32, color: Colors.white),
        ),
      ),
    );
  },
)

Full Configuration

FlipboardView(
  itemCount: 10,
  initialPage: 0,
  perspective: 0.003,     // 3D depth effect (higher = more dramatic)
  flipDuration: const Duration(milliseconds: 400),
  loop: true,             // infinite scrolling
  onPageChanged: (index) {
    print('Page changed to: $index');
  },
  itemBuilder: (context, index) {
    return YourPageWidget(index: index);
  },
)

Programmatic Navigation

Use a GlobalKey to control the flip view from outside:

final GlobalKey<FlipboardViewState> _flipKey = GlobalKey();

// Navigate
_flipKey.currentState?.nextPage();
_flipKey.currentState?.previousPage();

// Read current page
final page = _flipKey.currentState?.currentPage ?? 0;

// Widget tree
FlipboardView(
  key: _flipKey,
  itemCount: 5,
  itemBuilder: (context, index) => YourPageWidget(index: index),
)

API Reference

FlipboardView

Parameter Type Default Description
itemBuilder Widget Function(BuildContext, int) required Builder function for each page
itemCount int required Total number of pages
initialPage int 0 Starting page index
perspective double 0.003 3D perspective depth (higher = more dramatic effect)
flipDuration Duration 400ms Duration of the flip animation
loop bool false Enable infinite looping
onPageChanged void Function(int)? null Called when the active page changes

FlipboardViewState

Member Type Description
nextPage() void Flip to the next page
previousPage() void Flip to the previous page
currentPage int (getter) The current page index

How It Works

FlipBook Pro splits each page into top and bottom halves and animates them independently using 3D matrix transformations:

  1. Drag detection — Vertical swipe gestures are tracked with cumulative drag calculation
  2. Split-flap rendering — The current page's half flips away while the target page's half rotates into view
  3. 3D perspective — Matrix4 transformations with configurable perspective create realistic depth
  4. Spring physics — SpringSimulation ensures smooth, natural settling animations
  5. Smart completion — Fling velocity (>50) or drag progress (>20%) determines whether the flip completes or snaps back

Example App

The example directory contains a full demo app showcasing:

  • Full-screen image pages with gradient overlays
  • News card layouts with interactive like/comment/share actions
  • Rich article views with hero images
cd example
flutter run

Platform Support

Platform Support
Android Supported
iOS Supported
Web Supported
macOS Supported
Windows Supported
Linux Supported

Pure Dart implementation — no platform-specific setup required.

License

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

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

Libraries

flipbook_pro