title: Flutter Zoom out effect on Stack of cards by swipe down
body: <p>I am trying to implement swipe down on stack of cards and making them zoom out.
  I have tried many basic animations together but nothing worked.</p>
  
  <p>Here is one of my code that i have tried:</p>
  
  <pre><code>    class _HomePageState extends State&lt;HomePage&gt; {
    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: &lt;Widget&gt;[
                  _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: &lt;Widget&gt;[
                                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,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                ],
              ),
            );
    }
  }
  </code></pre>
  
  <p>I need animation like Apple pay:
  <a href="https://i.stack.imgur.com/D3Bld.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D3Bld.gif" alt="swipe down animation"></a> </p>
  
  <p>Its showing single card and I need to show 3 cards as stack:</p>
  
  <p><a href="https://i.stack.imgur.com/aw3hR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aw3hR.png" alt="stack of cards"></a> </p>
  
  <p>and by dragging them down will zoom them out(like gif)</p>