💬
Get Help
JT
Juanito T. Vispo Jr

Hide/Show Top and Bottom Bar on Scroll

Actions & Logic

Hi everyone, can you help me with this?

I'm trying to set up a feature in my project to manage the visibility of a top and bottom bar based on user interaction. Here’s what I’m aiming for:

  1. Initial State: Both the top and bottom bars are invisible when the page loads.

  2. Scrolling: Whether the user scrolls down or up, both bars should stay hidden.

  3. Screen Touch: The top and bottom bars should only appear when the screen or page is clicked.

If anyone has tips let me know, I’d really appreciate the help!

Thanks!

What have you tried so far?

I've managed to create the top and bottom bars using Positioned widgets and can control their visibility with state variables. I have set up actions to toggle the state variables to true when a button is clicked, but I need help figuring out how to detect screen clicks to toggle the visibility of the bars. I've also tried watching YouTube tutorials but haven't found any that are relevant to this problem.

Edit.
The only problem I'm facing now is when the top/bottom bar has appeared, I want them to disappear again when I start scrolling. Currently, I have to click the page again to hide the top/bottom bar before I can start scrolling.

Did you check FlutterFlow's Documentation for this topic?
No
1
1 reply