Sliverappbar with a custom AppBar

Actions & Logic

I'm working on a custom AppBar in FlutterFlow (component without any custom code), as the built-in AppBar doesn't offer enough customization for my needs. I want to achieve the SliverAppBar functionality (where the AppBar hides/shows during scroll) on a page that contains a scrollable ListView widget.

What have you tried so far?

Here's what I've tried so far:

  • I wrapped the ListView widget in a container and added actions (using app states and vertical drag update/down actions) to hide the AppBar as the user scrolls.

  • However, this approach interferes with the ListView’s scroll behavior. Sometimes it scrolls, but other times it doesn’t—likely because the container actions and the scroll gestures seem to conflict.

  • I also tried adding the actions directly to the ListView's children, but it didn’t work, as the scroll actions apply to the ListView itself, not the children.

Has anyone faced a similar issue or have suggestions? Would creating a custom action and applying SliverAppBar functionality to my AppBar component be the way to go? Or is there another approach I’m missing?

Any guidance would be greatly appreciated. Thanks in advance!

Did you check FlutterFlow's Documentation for this topic?
Yes
3
2 replies