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.

Features #

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 #

FlipboardViewState #

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 #

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.