Flutter Flip animator

flip_animator.dart

import 'package:flutter/widgets.dart';
import 'dart:math';

class FlipAnimator {
  FlipAnimator(this.vsync) {
    flipController = AnimationController(
        vsync: vsync, duration: const Duration(milliseconds: 300));

    flipA = Tween<double>(begin: 0.0, end: pi / 2).animate(CurvedAnimation(
      parent: flipController,
      curve: Interval(0, 0.5, curve: Curves.easeIn),
    ));
    flipB = Tween<double>(begin: pi / 2, end: pi).animate(CurvedAnimation(
      parent: flipController,
      curve: Interval(0.5, 1, curve: Curves.easeIn),
    ));
  }

  final TickerProvider vsync;
  AnimationController flipController;
  Animation<double> flipA;
  Animation<double> flipB;

  bool flipped = false;

  Future flip() async {
    try {
      if (flipped) {
        await flipController.reverse().orCancel;
        flipped = false;
      } else {
        await flipController.forward().orCancel;
        flipped = true;
      }
    } on TickerCanceled {
      print("Animation Failed");
    }
  }

  dispose() {
    flipController.dispose();
  }
}

flip_widget.dart

class FlipPage extends StatefulWidget {
  @override
  _FlipPageState createState() => _FlipPageState();
}

class _FlipPageState extends State<FlipPage> with TickerProviderStateMixin {
  FlipAnimator _animator;

  @override
  void initState() {
    _animator = FlipAnimator(this);
    super.initState();
  }

  Matrix4 _pMatrix(num pValue) => Matrix4(
        1.0, 0.0, 0.0, 0.0, //
        0.0, 1.0, 0.0, 0.0, //
        0.0, 0.0, 1.0, pValue * 0.001, //
        0.0, 0.0, 1.0, 1.0,
      );

  @override
  Widget build(BuildContext context) {
    // timeDilation = 5.0;
    final sideA = Container(
      child: GestureDetector(
        onTap: _animator.flip,
        child: Material(
          child: Container(
            color: Colors.white,
            child: Center(
              child: Text('Page 1'),
            ),
          ),
        ),
      ),
    );
    final sideB = Container(
      child: GestureDetector(
        onTap: _animator.flip,
        child: Transform(
          transform: Matrix4.identity()..rotateY(pi),
          alignment: FractionalOffset.center,
          child: Material(
            child: Container(
              color: Colors.white,
              child: Center(
                child: Text('Page 2'),
              ),
            ),
          ),
        ),
      ),
    );
    final stack = Stack(
      children: <Widget>[
        AnimatedBuilder(
          animation: _animator.flipA,
          child: sideA,
          builder: (context, widget) {
            return Transform(
              transform: _pMatrix(1.0)..rotateY(_animator.flipA.value),
              child: widget,
              alignment: FractionalOffset.center,
            );
          },
        ),
        AnimatedBuilder(
          animation: _animator.flipB,
          child: sideB,
          builder: (context, widget) {
            return Transform(
              transform: _pMatrix(1.0)..rotateY(_animator.flipB.value),
              child: widget,
              alignment: FractionalOffset.center,
            );
          },
        ),
      ],
    );

    return Container(
      margin: EdgeInsets.symmetric(vertical: 50, horizontal: 50),
      child: stack,
    );
  }
}