Stretchy header effect

Question

I'm looking to create a header effect like this:

Specifically, I want it so when the user overscrolls on iOS, the image should zoom to fill the extra space. Then, on Android and iOS, when the user starts scrolling down the screen, the header should be scrolled away with a parallax effect.

I pulled the above screen video from this package here: https://github.com/gskbyte/GSKStretchyHeaderView

Another example can be found here: https://medium.freecodecamp.org/tutorial-creating-stretchy-layouts-on-ios-using-auto-layout-3fa974fa5e28

I was playing around with SliverPersistentHeaders and FlexibleSpaceBars but I was unable to get this effect quite how I wanted it.

Answer 1

Think what you are going to need is Sliver app bar with the flexible space bar. Take a look here: https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe.

Answer 2

Consider using approach from stretchy header package