Sticky Grouped Headers in Flutter

Need to create grouped sticky headers? There is a new widget in town, the SliverMainAxisGroup allows you to arrange multiple slivers together. Create sticky headers that are pushed out of view as each sliver group scrolls by. You’ll learn to use the SliverMainAxisGroup with AppBar or SliverPersistentHeaderDelegate to create sticky headers.

In this coffee break codelab, you'll explore:
  • CustomScrollView using slivers for scrolling effects and performance 
  • Group data with the SliverMainAxisGroup widget containing sticky headers and grouped data
  • Create sticky headers for each group by using SliverAppBar
  • Create sticky headers for each group by using SliverPersistentHeaderDelegate
  • Format actual grouped data with ListTile and the leading icon
  • Create a service to load JSON quotes list and map them to a class model
  • Create reusable widgets 
  • Explore all concepts without using any third-party packages 

Meet the instructor

Marco Napoli

Content Author & Course Instructor

More courses by the instructor