I am currently building a Flutter web application and have encountered an issue where some of my widgets do not resize properly with the browser zoom. When the user decreases the zoom level, some of the widgets become cutoff and disappear from the screen.
I would like to request help in finding a solution to ensure that all of my widgets remain fully visible and properly resized regardless of the user's browser zoom level.
Steps to Reproduce
Open the Flutter web application in a browser.
Zoom in or out using the browser zoom controls.
Observe that some of the widgets become cutoff and disappear from the screen when zoomed out too far.
Expected Behavior
All widgets should remain fully visible and properly resized with the browser zoom, without becoming cutoff or disappearing from the screen.
Technical Information
Flutter version: Flutter (Channel master, 3.8.0-7.0.pre.3, on Microsoft Windows [Version 10.0.19042.631], locale en-US)
Browser: Google Chrome
Operating System: Windows 10
Thank you in advance for any help or suggestions in resolving this issue.
Related
Flutter web seems to render the elements on the screen way too large. Everything, from text, to Containers, to form fields, is massive. It is like everything has been zoomed in. It doesn't look good. I thought setting the visual density of the theme to VisualDensity.compact or VisualDensity.adaptivePlatformDensity would fix it, but it doesn't seem to. Running the app on a very large iPad Pro does not enlarge the elements. Why might this enlargement happen? I work on another Flutter app that is not enlarged on web and am unsure of what the key difference is that is causing the different rendering behaviour.
This ended up being due to setting my mac display to "Scaled" with "larger text" in system preferences. It seemed to affect the web version and not the mobile simulators; I guess because the simulators are not under the mac display settings; they are their own device.
The fix was to set it to "Default for display":
How to track rendering traces? Drop down menu doesn’t offer me any of my screens, only Android activities.
I use setCurrentScreen() function to tell Firebase my current screen.
Here you can see the clock app's ui is running behind the gesture. how can i implement this in flutter? I updated flutter to 2.5 but it's not working.
This is the first question I asked on stackoverflow and i couldn't quite get the question layout. sorry for this.
You have to use
await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
in your main.dart before runApp.
As per the description of SystemUiMode.edgeToEdge:
Fullscreen display with status and navigation elements rendered over the
application.
Available starting at SDK 16 or Android J. Earlier versions of Android
will not be affected by this setting.
For applications running on iOS, the status bar and home indicator will be
visible.
The system overlays will not disappear or reappear in this mode as they
are permanently displayed on top of the application.
As I test my Flutter app on a physical Android device the UI seems to accumulate visual noise/artifacts. The distortion usually starts on the very top of the notification bar and is barely noticeable. It then spreads to other parts of the screen, but the notification bar is the most affected. Restarting the device seems to help.
Any ideas on remediation?
Wrapping each page’s Scaffold in a SafeArea seems to solve the problem.
We are having issues with jscrollpane custom scroll bars / regions on IE10 (whereas it works perfectly on desktop, android browser, etc). I have heard this could be due to the differences in touch events implemented by Microsoft in IE 10 as compared to other browsers... does anyone have any insight and perhaps means to repair this functionality?
Even the jscrollpane demo pages don't seem to scroll properly on IE 10 with touch.