Sticky Header in Flutter
Hello everyone!
In this article, we will talk about a structure that we see frequently in many applications. If we see an area that never scrolls while scrolling on any application screen, this is the sticky header. We know SliverAppBar widget also for as same goal.
When we’re scrolling As we saw above, while the search part disappears, the part with the countries remains stationary. We will create this structure very easily using the sticky_headers library. So let’s start our project by integrating our library.
dependencies:
sticky_headers: ^0.3.0+2
We see 3 main parts on the page: the part that will disappear while scrolling, the part that will remain stationary and the scrolled list. For easier understanding, we will create and use these parts in 3 classes.
Firstly, we create basic textfield for search widget.
Second step, we create a category menu as row and card widgets.
Last part, we create a list for scroll. There are 2 places we should pay attention to here. If we are using the ListView widget while putting the 3 main widgets we have created under each other, we will be using two nested ListView widgets. So, in the inner ListView widget we must set the shrinkWrap parameter to true.
shrinkWrap: true
And we must also set the physics parameter so that it can scroll properly.
physics: const ClampingScrollPhysics()
Finally, while using the sticky header library, we will combine the 3 main classes we created.
StickyHeader widget has 2 required parameters. The header parameter is requesting the widget that will remain stationary; The content parameter takes the list to scroll.
StickyHeader(header: , content: )
And of course we don’t forget to create a controller for all scrolling. We can say it’s ready in the end.
