turn_page_transition 0.1.3

This package provide simple Page-Turning Transition to your app.

turn_page_transition

turn_page_transition provide simple Page-Turning Transition to your app.

Demo

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,
                  turningPoint: turningPoint,
                  transitionDuration: const Duration(seconds: 1),
                  builder: (context) => const FirstPage(),
                ),
              ),
              child: const Text('go to next page'),
            ),
          ],
        ),
      ),
    );
  }
}

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,
          turningPoint: 0.1,
        ),
        primarySwatch: Colors.blue,
      ),
      routeInformationParser: routes.routeInformationParser,
      routerDelegate: routes.routerDelegate,
    );
  }
}

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.grey,
              child: child,
            ),
          ),
        ),
      ],
      errorBuilder: (context, state) => const Scaffold(),
    );
  }
}