Hero Animations don't work when the destination page uses device location.

[buyblvd-ryan]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• 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

Currently, I am using hero animation to make a custom nav bar transition smoothly between pages. As noted in some previous reports and discussions, hero animations are broken by backend queries performed ancestral to the widget being animated, but using device location anywhere on the page causes the issue as well in a way which can't be fixed in Flutterflow. (It can be fixed by editing the code for the pages, and the details of the fix are included below.

Expected Behavior

Hero animations should happen smoothly regardless of if the page uses location data.

Steps to Reproduce

1. Create two pages and in some way reference device location on both pages
2. Create a common element (can be static) and assign a hero animation tag.
3. Run the project on a native platform and navigate between pages to see that all elements on the page (including the hero widget) flicker.
4. The flickering disappears if the location reference is removed.

NOTE: The device does not have to request location access for the issue to arise, it still happens after location access has been granted.

Reproducible from Blank

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

Bug Report Code (Required)

IT4sls/q4ot1m/UC7r6JK+57/SIWNVw6bYISscpCbw4bIYj2P4lzY876P1ZucNPgT2NqM2Kcp140pOzQi979JewrHwuefphgzs5iZg7Jdz66V8STF7WST2t8RO9bIEig5J6niCRQCMteW1Vg7F2QBunJSgHDQo+yIkQ8Sq/LZO4=

Context

I'm attempting to use hero animations to reproduce the functionality of a nav bar (because all of the built-in nav bars lack any customizability). This works in theory and in testing with dummy pages, but referencing device location on any page will cause the nav bar to flicker, even though the elements which require location access are nested deeper in the page than the nav bar.

Flutterflow-generated pages which require location access query the location on init and save it to a widget-scoped variable.
The issue arrises from Flutterflow's injection of an empty scaffold with loading animation which completely replaces the user-created widget if the location variable is null. Because all pages full reinitialize themselves on every navigation to them, there's a brief moment where the page state is still waiting on the location, causing none of the page elements (including the hero animation) to be drawn.

This can be averted in a number of ways, including placing the loading animation at the level of the widget which requires location (as I successfully implemented) instead of at the top level of the scaffold—akin to how widgets with queries don't block the rendering of their ancestors and siblings. It would likely also be possible to keep device location at a higher scope, such that individual pages wouldn't have to create their own scope and read it as null for even an instant upon initialization. It's worth noting that in my testing, leaving the getCurrentUserLocation() invocation in init doesn't cause rendering errors, so it is only necessary to restructure the loading animation.

Visual documentation

This structure renders without issue on web, ios, and android in my testing. The custom nav bar widget is a sibling of the if/else creating the loading widget.

Additional Info

No response

Environment

- FlutterFlow version: 4
- Platform: iOS and Android
- Browser name and version: Arc
- Operating system and version affected: macOS 14

[sbis04]

@buyblvd-ryan I believe if you try accessing the current device location inside any Action then it doesn't add that loading animation for the page and the hero animations should work. We only add that loading animation, if the current device location is used to display on any widget. In this case, if you want to make the hero animation work the workaround might be to get the location in an "On Page Load" action and save it as a String to a variable. Then you can reuse the variable to display anywhere on the page. Let me know if this helps.

[buyblvd-ryan]

Hey @sbis04 this seems to be a viable FlutterFlow-native workaround from my testing. Thanks for suggesting it. Regardless, feels like the behavior I outlined is still a bug that should be addressed, but this will help until a better fix can be developed.

[buyblvd-ryan]

Oh, just an addendum to reinforce that this is not a long-term sustainable workaround (and in case anyone tries to replicate this), it requires manually handling null safety in some cases because suddenly the field is LatLng? instead of LatLng.

[github-actions]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[buyblvd-ryan]

@sbis04 haven't heard anything here in a while. just wanted to bump it so it doesn't get closed