turn_page_transition

Description:

turn page transition

turn_page_transition #
turn_page_transition provide simple Page-Turning Transition to your app.
Demo #
Transition #

PageView #

Usage #
Case 1: Use as PageRoute in Navigator #
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Home Page'),
ElevatedButton(
onPressed: () => Navigator.of(context).push(
// Use TurnPageRoute instead of MaterialPageRoute.
TurnPageRoute(
overleafColor: Colors.grey,
animationTransitionPoint: animationTransitionPoint,
transitionDuration: const Duration(milliseconds: 300),
reverseTransitionDuration: const Duration(milliseconds: 300),
builder: (context) => const FirstPage(),
),
),
child: const Text('go to next page'),
),
],
),
),
);
}
}
copied to clipboard
Case 2: Unify transition animations by ThemeData #
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final routes = Routes.routes();

return MaterialApp.router(
title: 'TurnPageTransition Example',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// Set TurnPageTransitionsTheme() at pageTransitionsTheme argument.
pageTransitionsTheme: const TurnPageTransitionsTheme(
overleafColor: Colors.grey,
animationTransitionPoint: 0.5,
),
primarySwatch: Colors.blue,
),
routeInformationParser: routes.routeInformationParser,
routerDelegate: routes.routerDelegate,
);
}
}
copied to clipboard
Case 3: Use Page-Turning Transition with GoRoute #
class Routes {
const Routes();

static const first = '/first';
static const second = '/second';
static const home = '/';

static GoRouter routes({String? initialLocation}) {
return GoRouter(
initialLocation: initialLocation ?? home,
redirect: (state) => null,
routes: [
GoRoute(
path: home,
builder: (context, state) => const HomePage(),
),
GoRoute(
path: first,
builder: (context, state) => const FirstPage(),
),
GoRoute(
path: second,
// Use TurnPageTransition in CustomTransitionPage.
pageBuilder: (context, state) => CustomTransitionPage(
child: const SecondPage(),
transitionsBuilder: (
context,
animation,
secondaryAnimation,
child,
) => TurnPageTransition(
animation: animation,
overleafColor: Colors.blueAccent,
animationTransitionPoint: 0.5,
direction: TurnDirection.rightToLeft,
child: child,
),
),
),
],
errorBuilder: (context, state) => const Scaffold(),
);
}
}
copied to clipboard
Case 4: Use Page-Turning View #
class PageViewPage extends StatelessWidget {
const PageViewPage({super.key});

@override
Widget build(BuildContext context) {
final controller = TurnPageController();
return Scaffold(
body: TurnPageView.builder(
controller: controller,
itemCount: 10,
itemBuilder: (context, index) => _Page(index),
overleafColorBuilder: (index) => colors[index],
animationTransitionPoint: 0.5,
),
);
}
}
copied to clipboard