Flutter Zoom out effect on Stack of cards by swipe down

Viewed 967

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.

Here is one of my code that i have tried:

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

I need animation like Apple pay: swipe down animation

Its showing single card and I need to show 3 cards as stack:

stack of cards

and by dragging them down will zoom them out(like gif)

0 Answers
Related