BookFlip Flutter Package #

The BookFlip is a custom Flutter widget that simulates a book flipping effect. It allows you to display content in the form of a book with a cover page and flip through pages with an animated 3D effect. This widget is customizable, supporting various settings such as flip duration, page spacing, shadow effects, and more.

Demo #

Here’s a demonstration of the BookFlip in action:

Above: A book-flipping animation showcasing the BookFlip.

Features #

• Book Flip Animation: Provides a 3D flipping effect for pages.
• Customizable Cover Page: Optionally display a cover page before the content starts.
• Page Looping: Enable looping to go back to the first page when the last page is reached.
• Page Flip Callback: Handle page flip events via a callback function.
• Shadow Effect: Customize the shadow appearance of pages.
• Customizable Animation Settings: Set flip duration, flip angle, and other animation parameters.

Installation #

To use this package in your Flutter project, add it as a dependency in your pubspec.yaml file:

dependencies:
  book_widget: ^1.0.0 # Replace with the latest version

Then, run the following command to install the package:

flutter pub get

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:book_widget/book_widget.dart'; // Replace with your package import

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Book Widget Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BookPage(),
    );
  }
}

class BookPage extends StatelessWidget {
  const BookPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Book Widget Example'),
      ),
      body: Center(
        child: BookFlip(
          coverPage: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text('Cover Page'),
                Text('Happy Anniversary'),
              ],
            ),
          ),
          content: [
            ColoredBox(
              color: Colors.red,
              child: const Center(
                child: Text('Page 1'),
              ),
            ),
            ColoredBox(
              color: Colors.green,
              child: const Center(
                child: Text('Page 2'),
              ),
            ),
            ColoredBox(
              color: Colors.blue,
              child: const Center(
                child: Text('Page 3'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Parameters #

The BookFlip accepts the following parameters:

• coverPage (Widget?): The widget to display as the cover page. This is optional.
• content (List<Widget>): A list of widgets that will represent the pages of the book.
• alignment (Alignment): The alignment of the book widget. Default is const Alignment(-0.2, 0).
• height (double): The height of the book. Default is 400.
• width (double): The width of the book. Default is 300.
• flipDuration (Duration): The duration of the flip animation. Default is const Duration(milliseconds: 800).
• flipAngle (double): The angle of the flip. Default is 150.
• pageSpacing (double): The spacing between pages. Default is 0.4.
• shadowColor (Color): The color of the shadow on each page. Default is Colors.black.
• shadowBlurRadius (double): The blur radius of the shadow. Default is 3.
• shadowSpreadRadius (double): The spread radius of the shadow. Default is 1.
• loop (bool): Whether the book should loop back to the first page after reaching the last page. Default is true.
• onPageFlip (void Function(int)?): A callback function that is triggered when the page flips. This receives the previous page index as an argument.

Example Customization #

BookFlip(
  coverPage: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('Cover Page'),
        Text('Happy Anniversary'),
      ],
    ),
  ),
  content: [
    ColoredBox(
      color: Colors.red,
      child: const Center(
        child: Text('Page 1'),
      ),
    ),
    ColoredBox(
      color: Colors.green,
      child: const Center(
        child: Text('Page 2'),
      ),
    ),
    ColoredBox(
      color: Colors.blue,
      child: const Center(
        child: Text('Page 3'),
      ),
    ),
  ],
  flipDuration: const Duration(milliseconds: 1000),
  flipAngle: 180,
  pageSpacing: 0.2,
  shadowColor: Colors.blue,
  shadowBlurRadius: 5,
  shadowSpreadRadius: 2,
  loop: false,
  onPageFlip: (page) {
    print('Flipped to page: $page');
  },
);

Notes #

• The coverPage is optional. If not provided, the content pages will be shown directly.
• The flipDuration defines how fast the page flips, and the flipAngle controls how much of a 3D flip effect is applied.
• Use onPageFlip to handle actions when a page is flipped (e.g., update UI or trigger an event).

Testing #

You can run tests using the following command:

flutter test

Example tests are included to check the behavior of the widget, including its rendering, page flip functionality, and looping behavior.

Contribution #

Feel free to fork this repository and submit pull requests for any bug fixes, enhancements, or new features. Make sure to follow the code style and write tests for any new functionality.

License #

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

---

### Explanation:

- **Title and Overview**: Describes the functionality of the `BookFlip` and its main features.
- **Installation Instructions**: Provides step-by-step guidance on how to add the package to your Flutter project.
- **Usage**: Demonstrates how to implement the `BookFlip` in a Flutter app with a basic and customized example.
- **Parameters**: Details the configurable parameters of the `BookFlip`.
- **Customization**: Shows how you can further customize the widget with animation duration, flip angle, shadow, etc.
- **Testing**: Mentions the usage of Flutter's test framework and running tests.
- **Contribution and License**: Invites contributions and explains the licensing under MIT.

Let me know if you need additional information or modifications to the README!