Я пытаюсь осуществить смахивание стопки карточек и их уменьшение. Я перепробовал много базовых c анимаций вместе, но ничего не получалось.
Вот один из моих кодов, которые я пробовал:
class _HomePageState extends State<HomePage> {
final HomeController _controller;
double _scaley = 1;
double skewY = 0;
double rotateZ = 0;
double radius = 15.0;
_HomePageState(this._controller);
@override
void initState() {
super.initState();
refreshView();
}
refreshView() {
_controller.init((result) {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return _controller.isLoading
? Center(
child: CircularProgressIndicator(),
)
: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_controller.data.defaultCard == null
? Container()
: Container(
height: MediaQuery.of(context).size.height / 2.4,
child: new GestureDetector(
onVerticalDragDown: (DragDownDetails details) {
skewY = 0.3;
rotateZ = -3.14 / 18.0;
_scaley = 1.1;
radius = 20.0;
setState(() {});
},
child: Stack(
alignment: FractionalOffset.topRight,
children: <Widget>[
Positioned(
top: 20,
child: Transform(
transform: Matrix4.skewX(skewY)..rotateZ(rotateZ)..scale(_scaley),
child: OtherCard(
radius: radius,
card: _controller.data.defaultCard,
defaultCard: true,
callback: refreshView,
),
),
),
Positioned(
top: 70,
child: Transform(
transform: Matrix4.skewX(skewY)..rotateZ(rotateZ)..scale(_scaley),
child: OtherCard(
radius: radius,
card: _controller.data.defaultCard,
defaultCard: true,
callback: refreshView,
),
),
),
Positioned(
top: 120,
child: Transform(
transform: Matrix4.skewX(skewY)..rotateZ(rotateZ)..scale(_scaley),
child: OtherCard(
radius: radius,
card: _controller.data.defaultCard,
defaultCard: true,
callback: refreshView,
),
),
),
],
),
),
),
],
),
);
}
}
Мне нужна анимация, такая как Apple pay: 
Это показывает одну карту, и мне нужно показать 3 карты как стопку:
и перетаскиванием они уменьшат масштаб (как GIF)