Telegram API Question posted in
A comprehensive official documentation can be found here.

How to animate fullscreen photo transition on swipe, like in Telegram? – Telegram API

When you swipe vertically, image is dragged towards the swipe, with fading out animation of black background.
And after release, it smoothly returns to it’s previous position on the screen, like Hero animation does.

How is it possible to recreate such an effect using Flutter? The same scenario, in fullscreen photo view.
photo_view package is desired for fullscreen, so it shouldn’t interfere with zooming.

Illustration of animation

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution. To create such an animation, you should use extended_image package, which has SlideOutPage widget for creation of such transitions.


  2. 0

    What you need is actually an out-of-the-box widget, and it’s surprisingly easy to use. It’s called Hero. Basically, you wrap the widget you want to animate like that in a Hero widget, with a specific tag string, and, when you navigate to another screen, you wrap the destination widget in another Hero with the same tag. An effect like the one you shared can be achieved by wrapping two widgets with the same photo with Heroes in different PageRoutes.

    Check out this Flutter widget of the week video to get you started, and this Flutter.dev article for a more detailed explanation on Hero widgets.

    Edit: I see you are looking for a more specific image-viewer behavior. Then, I suggest you use the photo_view package, which includes many functionalities to visualize images, including the hero transition with swipe-dow-to-dismiss behaviors, pinching to zoom, etc.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search