Flutter UI tips and tricks

Sticky header - A ListView inside a ListView in Flutter

It may look like this sub-header list item is really sticking up to the header, but in fact, that is just a fake double of the real LisView sub header item :)

We detect the amount of scroll that user has performed, and if user has scrolled more than the size of yellow scrollable area(_removableWidgetSize), we display(otherwise it’s hidden) its clone:

So, now, when we check the element/widget tree of our app, this is how it looks like:

You can see that the real sticky element is below both the header and fake sticky element.

Code looks a bit messy, but you can make your own custom widget of this, and use it in a more elegant way.

Complete example can be found here:

Thanks for your time and keep Fluttering! 💙

Join Medium with my referral link - Jelena Lecic