Web app address bar not collapsing on mobile

[Saaamir]

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

When scrolling the address bar of safari or Google Chrome does not collapse/minimize.

Expected Behavior

When scrolling through any web page the usual behaviour for the safari/Google Chrome browser is to collapse/minimize the address bar.

Steps to Reproduce

1. create new page
2. create scrollable column
3. insert with random data until scrollable (e.g. a couple of images)
4. scroll

Reproducible from Blank

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

Bug Report Code (Required)

IT40lvHqx892ofVD187UY8dFmiQ5KW5+ULgNjexBaCgofePtOol3evWlakhvZMDmSghIeUSmmmoHwsLSkvHhUuwoHxOBR5w7wqpibw3hfGaVe5OBO6qeWmhAQJhhI2XGy6W72B0kBMtaV1ks2E2QPeytTgHdHpOxImdISq/LZO4=

Context

To increase the clarity of our web app we want the address bar (at the bottom in safari) to minimze itself when scrolling.

Visual documentation

Here is a random video i found illustrating usual address bar behaviour (safari in this example):

Additional Info

No response

Environment

- FlutterFlow version: 3.10.4
- Platform: web
- Browser name and version: safari, 16.5.1 or Google Chrome, version 115.0.5790.171
- Operating system and version affected: iOs 16.5.1 (Safari)

[Saaamir]

Just saw that the video seems to not be playing. So here is a illustration explaining minimized address bars:

[wenkaifan0720]

Hi @Saaamir. This is rather a limitation of the Flutter framework on web. The scrolling is detected in the Flutter framework so the browser is not aware of it and hence does not hide the address bar. See discussions here: flutter/flutter#69529.

I do think it is a nice to have feature so I'll keep this issue open and post updates here once it is fixed.

[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.

[iKK001]

I have the same problem (i.e. opening Web on any mobile in combination with ScrollView does not work !)

There are a few solutions presented about mutating the style in the index.html file. But non of them work or at most, they only seem to work for non-scrolling Flutter applications (...which are very rare ;))

Is there any Flutter-native solution to this problem (i.e. make Browser NavBar hiding experience with Flutter-scrolling as smooth and nice as expected) ?

The reason I am so keen on this solution is: Many users open the Web App on a mobile phone and therefore it is crucial for my Flutter-web app to make this work.

[wenkaifan0720]

Since this is something Flutter doesn't support right now, I will close this issue for now. But I will keep my eye open once it is possible with Flutter. Thanks!