StickyHeader scrolling issue.

[fabianjozsa]

Can we access your project?

• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I have a scrollable column, with a StickyHeader inside it. The content of the StickyHeader widget is a listview. I have datapills in the header of the StickyHeader, which filter my listview below. If one scrolls down in the list view and switches to another datapill and the filtered list items length is shorter, the header of the StickyHeader jumps to the bottom of the page and resets back only if the content is touch scrolled. I tried hiding and displaying the header again after the filter is applied, but the behavior is the same. I also tried scrollto action on the content view, that didn't seem to do anything either.

Expected Behavior

The conent updates based on the filter change, but the sticky header sticks to the top.

Steps to Reproduce

1. Create New Page, add navigation to the page from home page. (You may be able to do it on Home page as well instead).
2. Add new Page State variable showItems, Boolean set to true by default.
3. Select the column in the new page. Make it scrollable, select stretch for Cross Axis Alignment.
4. Add StickyHeader widget inside the column.
5. Add a Button into the header, wrap it in a row. Set the action on it to to update page state toggle the value of showItems
6. Select the last sample list item container in the content of the sticky header, make its visibility conditional equal to page state variable showItems.
7. Duplicate these a couple of times so the list items are scrollable down the page.
8. Launch the application, navigate to the test page, scroll down in the list view then push the button in the header. You will notice that the header will jump to the bottom of the page.

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITFXi87huJdgrthE+qniLMZonmEwGVwbbZIRiO4aTTEjGJz1BIYMaffSS1pBONOkTWw2KEWKpHsE0uj3ivP9IMYBNSquUapCwatUZj3vWky/aoSTBsyaQ0QnAdpbGhG90YmsniJdCNNhdEIs7DiMBeeRSindNKH6Zwh9f6PHaOI=

Visual documentation

Environment

- FlutterFlow version: v5.0.2
- Platform: Web, iOS, Android
- Browser name and version: Chrome  129.0.6668.60 
- Operating system and version affected: MacOS Sequoia 15.0, iOS 18

Additional Information

Trying to publish my updated app with this new page in it.

[Kato-Official]

Hi @fabianjozsa, I tried to used sticky header many time, however always opted at the end for a stack, reason being was that annoying jiggling effect that the header has when you scroll the list below (even when setting fixed hardcoded height and width sizes). Have you find a solution for that? Do you get that jiggling jumping like weird thing it does when scrolling?

[Kato-Official]

I mean this one:

1004.mp4

Anyone from support knows how to fix that header moving so to be "sticky" without moving and shaking?

[Alezanello]

Hello!

I attempted to replicate the issue but was unable to do so.

Here are the steps I followed:

1. Created a new blank project.
2. Set the Column on the default page as Scrollable.
3. Added a StickyHeader.
4. Added two buttons to toggle the value of an AppState variable.
5. Filled the list with multiple containers to enable scrolling.
6. Ran the project in Test Mode.
7. Scrolled to the bottom and tapped the button.

Could you confirm if there’s anything I might have missed in these steps? I’m happy to investigate further!

Looking forward to your feedback.

Public Project you can clone to test and modify:
https://app.flutterflow.io/project/qa-2175-whshe5

[fabianjozsa]

Hello!

I attempted to replicate the issue but was unable to do so.

Here are the steps I followed:

1. Created a new blank project.
2. Set the Column on the default page as Scrollable.
3. Added a StickyHeader.
4. Added two buttons to toggle the value of an AppState variable.
5. Filled the list with multiple containers to enable scrolling.
6. Ran the project in Test Mode.
7. Scrolled to the bottom and tapped the button.

Could you confirm if there’s anything I might have missed in these steps? I’m happy to investigate further!

Looking forward to your feedback.Public Project you can clone to test and modify:https://app.flutterflow.io/project/qa-2175-whshe5

Please watch this video that shows the issue in action:

https://youtu.be/b8W1FMHZtV0

[fabianjozsa]

Didn't mean to close the issue. Please watch the video.

https://youtu.be/b8W1FMHZtV0

[Alezanello]

Hello,

Thank you for the video. I was able to replicate the issue on my end. However, I'm still not certain whether this is a Flutter-specific problem or something that FlutterFlow can address. I'll forward this to our engineering team for further investigation.