lift and flip card animation in flutter - flutter

Question

I want to lift my card up, flip it and then place it back to its original position. Currently i have achieved to flip the card by the following code. Can anyone tell how can i lift the card as well.
animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween(begin: 0.0, end: 2*pi).chain(CurveTween(curve: Curves.linear)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(pi*2),
weight: 50.0,
),
],
).animate(animationController);
And my widget is:-
AnimatedBuilder(
animation: animationController,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
builder: (context,child){
Matrix4 transform = Matrix4.identity();
transform.setEntry(3, 2, 0.001);
transform.rotateY(animation.value);
return Transform(
transform: transform,
alignment: Alignment.center,
child: child,
);
},
),

Answer 1

You can lift the container up and put it back using AnimatedContainer. Here is a sample using your snippets.
class FlipAndLiftAnimation extends StatefulWidget {
const FlipAndLiftAnimation({Key? key}) : super(key: key);
#override
_FlipAndLiftAnimationState createState() => _FlipAndLiftAnimationState();
}
class _FlipAndLiftAnimationState extends State<FlipAndLiftAnimation>
with TickerProviderStateMixin {
late AnimationController animationController;
late Animation<double> animation;
double boxSize = 100;
double initialSize = 100;
double expandedSize = 300;
#override
void initState() {
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 350),
);
animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween(begin: 0.0, end: 2 * pi)
.chain(CurveTween(curve: Curves.linear)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(pi * 2),
weight: 50.0,
),
],
).animate(animationController);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(164, 117, 81, 1),
child: Center(
child: GestureDetector(
onTap: () async {
animationController.isCompleted
? animationController.reverse()
: animationController.forward();
setState(() {
boxSize = expandedSize;
});
await Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
boxSize = initialSize;
});
});
},
child: AnimatedBuilder(
animation: animationController,
child: AnimatedContainer(
margin: EdgeInsets.all(50),
height: boxSize,
width: boxSize,
color: Colors.red,
duration: Duration(milliseconds: 300),
),
builder: (context, child) {
Matrix4 transform = Matrix4.identity();
transform.setEntry(3, 2, 0.001);
transform.rotateY(animation.value);
transform.scale(1.0, 1.0, 10);
return Transform(
transform: transform,
alignment: Alignment.center,
child: child,
);
},
),
),
),
),
);
}
}