page_flip_builder

Description:

page flip builder

Page Flip Builder #




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.
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:
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(),
),
),
);
}
}
copied to clipboard
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<PageFlipBuilderState> and programmatically flip the page with a callback-based API:
class MyApp extends StatelessWidget {
// used to flip the page programmatically
final pageFlipKey = GlobalKey<PageFlipBuilderState>();
@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'),
),
),
);
}
}
copied to clipboard
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
copied to clipboard
LICENSE: MIT #