How to achieve iOS navigation between routes overlay effect

Question

I'm developing a flutter app, that on iOS devices, I see it's pretty common to have screen transitions to have the effect of previous screen zoomed out, and the new screen sliding from the bottom, and is on top of the previous screen, while we can still see part of the previous screen.

As you can see in the screenshot down below, the blue line is part of the previous screen, the majority of it is getting covered by the new screen.

overlay effect that I'd like to have

I've been searched around for a little bit, would be great if someone could help. Thanks in advance!

score 1 · Answer 1 · answered Feb 21 '22 at 00:07

Look into showModalBottomSheet

In the onPress on the button that loads the overlay screen write this

showModalBottomSheet(
    context: context,
    builder: (context) {
      // Your overlay widget
  }
)

This tutorial gives you some step by step and examples https://blog.logrocket.com/flutter-modal-bottom-sheet-tutorial-with-examples/

How to achieve iOS navigation between routes overlay effect

1 Answers1