Flutter: Implementing Filters in AppBar with Scroll and Hide Functionality

I need to implement filters at the top of the screen. The idea is that when you scroll down, the filters should disappear, but the title and leading widget should remain visible. Additionally, when scrolling up, the filters should reappear. Does anyone have any suggestions on how to achieve this, what is the best use for this for this feature?

You can achieve this functionality using the new PinnedHeaderSliver and SliverResizingHeader widgets introduced in Flutter 3.24. These widgets allow you to design dynamic App Bars where headers can float, stay pinned, or resize as the user scrolls.

Implementation Steps:

• Use PinnedHeaderSliver: This keeps your title and leading widget always visible at the top.
• Use SliverResizingHeader: Place your filters inside this widget so they disappear when scrolling down and reappear when scrolling up.

These new widgets provide a simpler and more flexible interface compared to the existing SliverPersistentHeader and SliverAppBar.

💡 For a practical example, check out the PinnedHeaderSliver code that recreates the effect of the settings bar in iOS apps.

References:

• Flutter Slivers Documentation
• Flutter 3.24 Release Notes