Equivalent of position: sticky in Flutter?

Question

I want to build something similar to this Spotify UI.

Initially, all buttons are in a single row, (green heart, download, three dots and green play button)

But after the page is scrolled, all other buttons gets scrolled above, and picture gets converted to Appbar, but the play button sticks to the middle of the Appbar instead of scrolling off. This is equivalent to position: sticky of CSS

I did some research on SliverAppBar and SliverPersistentHeaders, i know picture to appbar transition can be made with SliverAppbar or SliverPersistentHeaderDelegate, but i am not able to figure out how to make that green play button stick to the middle of the appbar.

Any help will be appreciated! Thank you.

I didn't try yet, my knowledge about slivers is still limited. Trying to collect more info on same. — Sanketh B. K, Jul 25 '22 at 19:30
You can try on sliver and share the issue what went wrong on that case — Md. Yeasin Sheikh, Jul 25 '22 at 19:31

score 0 · Answer 1 · answered Nov 05 '22 at 05:39

0

I created a package for same use-case https://pub.dev/packages/flutter_sticky_widgets

answered Nov 05 '22 at 05:39

Sanketh B. K

759
8
22

Equivalent of position: sticky in Flutter?

1 Answers1