Support for Material Design "Subheaders"

[HansMuller]

http://www.google.com/design/spec/components/subheaders.html

Upon scrolling, subheaders remain pinned to the top of the screen until pushed on or off screen by the next subheader.

In the example below, the subheader text is blue.

[levrik]

Would really like to see that in the framework. Any pointers on how to achieve that already at the moment? @Hixie @HansMuller

[Hixie]

It would probably have to be a sliver that has a list of slivers and knows about the sticky header logic, a bit like a combination of RenderSliverList, RenderSliverPadding, and RenderSliverPersistentHeader. We would definitely welcome a patch that did this. It's a little subtle though.

It's something we will do eventually but we don't expect to have this done any time soon.

[levrik]

@Hixie Can you give me a few more hints? I'm completely lost and I really don't want to move to React Native or Xamarin.

[Hixie]

I recommend starting to pull a thread starting with SliverAppBar. Follow through how it's built, and eventually you'll reach RenderSliverPersistentHeader, see how it's built (notably, how its performLayout method works to keep itself on-screen). Then, follow a thread from SliverPadding and see how RenderSliverPadding works (notably, how it wraps its child).

You want to create a RenderSliver subclass that works like a combination of those two. It would have two children, a RenderBox that ends up being the header (just like RenderSliverPersistentHeader), and a RenderSliver that it wraps (just like RenderSliverPadding). Then you have to get the performLayout method to do the maths correctly to handle both of them at the same time. You'll also have to implement the paint() method and hitTest() method to pass down the paint and hittest calls, but that part should be somewhat simpler.

A lot of this is actually documented in some detail, see the docs for RenderSliver, AbstractNode (the super class of RenderObject), methods like performLayout or paint, etc. For slivers specifically, lots of docs exist on the various properties of SliverConstraints and SliverGeometry, which you'll need to implement the layout method.

I'm sorry this isn't simpler. Feel free to ask specific questions if you run into trouble.

[levrik]

@Hixie Thanks. I will give it a second try next weekend.

[voliva]

Any update on this feature? As a workaround I see there's this package https://github.com/itsJoKr/sticky_header_list that seems to do the trick

Edit - There's this other implementation as well: https://github.com/slightfoot/flutter_sticky_headers

[letsar]

@voliva I created a package for sticky headers as sliver here: https://github.com/letsar/flutter_sticky_header. It takes a widget as header and a sliver as child. I hope I created it as @Hixie explained it.

Does it match your requirements?

[Hixie]

@letsar that looks awesome. my only comment would be that the percentage observer won't work well because it'll always lag by one frame.

[letsar]

Thanks @Hixie. Yes it's true for the lag 😞. Do you know how to fix this?

[Hixie]

You could create a kind of RenderObject that takes the percentage as one of the constraints. Maybe its constraints could be a class with a double (the percentage) and a BoxConstraints object, and its child would be a RenderBox to which you pass the BoxConstraints. If you model this render object after the LayoutBuilder widget and its render object, you can have the same API you have today but without the lag. It's a rather advanced use of Flutter's API, but hey, no worse than slivers, and you seemed to handle that pretty well. :-)

[letsar]

Oh great, thank you! Challenge accepted 😄. I will give it a try after finishing the work in progress on the next feature. Maybe I'll come back to you later, once I dive in the lag issue.
By the way, thank you for your work on the Flutter SDK 👍.

[letsar]

@Hixie I worked on a solution for the scroll percentage to not lag by one frame, by following your explanation. Thanks again, your instructions were very clear 👍.

If you have time, can you tell me if it's what you had in mind?
The code is on this branch: https://github.com/letsar/flutter_sticky_header/tree/feature/2_percentage_observer

[Hixie]

Yep, that's pretty much it!

[Piinks]

Upon scrolling, subheaders remain pinned to the top of the screen until pushed on or off screen by the next subheader.

I'm working on a SliverGroup project that will enable the pinned-then-pushed behavior described here for SliverPersistentHeader. I should have a doc/propsed changes ready for feedback soon.

Here's an updated link to subheaders (under anatomy) in the Material spec: https://material.io/components/lists/#anatomy

@HansMuller Any thoughts on if there should be a stand alone material subheader widget devoted to this? Or does updating SliverPersistentHeader sound appropriate? I am thinking a whole other header widget will be confusing.

[HansMuller]

Updating SliverPersistentHeader's API to support subheaders sounds like a good approach to me.

[Hixie]

There are a number of packages that do this now: https://pub.dev/packages?q=sliver+header

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.