Search code examples
fluttergesture

How to implement the drag down gesture to make page fade out and navigate back to the last page in Flutter?


I'm a newbie to flutter development, please forgive if me if it's a simple question.

I have no idea to implement this feature when user swipe down or swipe left, it will show fade out animation on current page, and the last page will fade in from bottom. Please check the effect on the gif.

I think i need to listen to user's swipe actions, and make the effect by accordingly. But i have no clue about implementing both of them.

enter image description here


Solution

    1. For the effect there are many ways of implementing it but to get the idea check out Animate a widget across screens and from there you can figure out your way of doing it.
    2. For the Gestures there is a widget Gesture Detector. for example for tapDown and tapUp you can do like

    GestureDetector( child: yourChild, onTapDown: (tapDownDetails){/*your action here*/}, onTapUp: (tapUpDetails){/*your action here*/}, )