Animation 通过向下滑动，扑动缩小卡片堆栈的效果

我正在尝试在一堆卡片上实现向下滑动，并使它们缩小。 我一起尝试了很多基本的动画，但都没有效果

以下是我尝试过的代码之一：

    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,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
              ],
            ),
          );
  }
}

class\u HomePageState扩展状态{
最终家庭控制器(u控制器),；
双刻度=1；
双偏斜=0；
双旋转=0；
双半径=15.0；
_HomePageState（此.\u控制器）；
@凌驾
void initState（）{
super.initState（）；
刷新视图（）；
}
刷新视图（）{
_controller.init（（结果）{
setState（（）{}）；
});
}
@凌驾
小部件构建（构建上下文）{
返回\u控制器。正在加载
？中心(
子对象：CircularProgressIndicator（），
)
：SingleChildScrollView(
子：列(
crossAxisAlignment:crossAxisAlignment.start，
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
_controller.data.defaultCard==null
？容器（）
：容器(
高度：MediaQuery.of（context）.size.height/2.4，
儿童：新的手势检测器(
onVerticalDragDown：（DragDownDetails）{
偏斜度=0.3；
rotateZ=-3.14/18.0；
_scaley=1.1；
半径=20.0；
setState（（）{}）；
},
子：堆栈(
对齐：分馏Loffset.topRight，
儿童：[
定位(
前20名，
孩子：变换(
变换：Matrix4.skewX（skewY）…rotateZ（rotateZ）…scale（_scaley），
孩子：其他卡(
半径：半径，
卡：_controller.data.defaultCard，
defaultCard：对，
回调：刷新视图，
),
),
),
定位(
前70名，
孩子：变换(
变换：Matrix4.skewX（skewY）…rotateZ（rotateZ）…scale（_scaley），
孩子：其他卡(
半径：半径，
卡：_controller.data.defaultCard，
defaultCard：对，
回调：刷新视图，
),
),
),
定位(
排名：120，
孩子：变换(
变换：Matrix4.skewX（skewY）…rotateZ（rotateZ）…scale（_scaley），
孩子：其他卡(
半径：半径，
卡：_controller.data.defaultCard，
defaultCard：对，
回调：刷新视图，
),
),
),
],
),
),
),
],
),
);
}
}

我需要像Apple pay这样的动画：

它显示单个卡片，我需要显示3张卡片作为堆栈：

通过向下拖动，可以将其缩小（如gif）