https://github.com/bizz84/page_flip_builder
Interactive Page Flip Flutter widget
https://github.com/bizz84/page_flip_builder
animations flutter
Last synced: 7 months ago
JSON representation
Interactive Page Flip Flutter widget
- Host: GitHub
- URL: https://github.com/bizz84/page_flip_builder
- Owner: bizz84
- License: mit
- Created: 2021-01-30T09:54:36.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-01T15:24:57.000Z (almost 2 years ago)
- Last Synced: 2025-04-26T06:02:29.678Z (7 months ago)
- Topics: animations, flutter
- Language: Dart
- Homepage: https://codewithandrea.com
- Size: 196 KB
- Stars: 51
- Watchers: 2
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Page Flip Builder
[](https://pub.dev/packages/page_flip_builder)
[](https://dart.dev/)
[](http://mit-license.org)
[](http://twitter.com/biz84)
A custom Flutter widget that enables interactive page-flip transitions in your app.
You can use this to flip images, cards, or widgets of any size.
## Preview
Also see the **[Flutter Web Live Preview](https://page-flip-demo.web.app/#/)**.
## Usage
> Note: This package uses **null-safety**.
`PageFlipBuilder` is best used for **full-screen** page-flip transitions, but works with widgets of any size _as long as their width and height is not unbounded_.
`PageFlipBuilder` uses a **drag gesture** to interactively transition between a "front" and a "back" widget. These are specified with the `frontBuilder` and `backBuilder` arguments:
```dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
// add a black background to prevent flickering on Android when the page flips
color: Colors.black,
child: PageFlipBuilder(
frontBuilder: (_) => LightHomePage(),
backBuilder: (_) => DarkHomePage(),
),
),
);
}
}
```
By defalt the flip happens along the **vertical** axis, but you can change the `flipAxis` to `Axis.horizontal` if you want.
For more control, you can also add a `GlobalKey` and programmatically flip the page with a callback-based API:
```dart
class MyApp extends StatelessWidget {
// used to flip the page programmatically
final pageFlipKey = GlobalKey();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
// add a black background to prevent flickering on Android when the page flips
color: Colors.black,
child: PageFlipBuilder(
key: pageFlipKey,
frontBuilder: (_) => LightHomePage(
onFlip: () => pageFlipKey.currentState?.flip(),
),
backBuilder: (_) => DarkHomePage(
onFlip: () => pageFlipKey.currentState?.flip(),
),
// flip the axis to horizontal
flipAxis: Axis.horizontal,
// customize tilt value
maxTilt: 0.003,
// customize scale
maxScale: 0.2,
// be notified when the flip has completed
onFlipComplete: (isFrontSide) => print('isFrontSide: $isFrontSide'),
),
),
);
}
}
```
## Features
- Interactive flip transition using drag gestures (forward and reverse)
- Fling animation to complete the transition on drag release
- Flip page programmatically via callbacks
- Flip around the horizontal or vertical axis
- Flip widgets of any size
- Customizable flip duration, tilt, scale
## Testing the example app
Before running the example app, you need to create the `ios`, `android`, `web` folders as needed:
```
flutter create . --platform ios
flutter create . --platform android
flutter create . --platform web
```
### [LICENSE: MIT](LICENSE)