Flutter Flip Transition

main.dart

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(50),
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        onGenerateRoute: (RouteSettings routeSettings) {
          if (routeSettings.name == '/two') {
            return FlipRoute(enterPage: Page2(), settings: routeSettings);
          }
          return FlipRoute(enterPage: Page1(), settings: routeSettings);
        },
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Container(
        color: Colors.orange,
        child: Center(
          child: RaisedButton(
              child: Text('Next page'),
              onPressed: () {
                Navigator.of(context).pushNamed('/two');
              }),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Container(
        color: Colors.red,
        child: Center(
          child: Text('Ciao'),
        ),
      ),
    );
  }
}

class FlipRoute extends PageRouteBuilder {
  final Widget enterPage;
  final RouteSettings settings;
  FlipRoute({this.enterPage, this.settings})
      : super(
          pageBuilder: (context, __, ___) => enterPage,
          transitionDuration: Duration(seconds: 2),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..setEntry(3, 2, 0.002)
                ..rotateY(animation.value >= 0.5 ? (animation.value + 1) * pi : 3 / 2 * pi),
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                  ..setEntry(3, 2, 0.002)
                  ..rotateY(secondaryAnimation.value < 0.5 ? secondaryAnimation.value * pi : pi / 2),
                child: child,
              ),
            );
          },
        );
}