CODEWITHSUNDEEP
flutterflutter-web
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Flutter web renders elements on the screen too large

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.

Upvotes: 0

Views: 344

Answers (1)

BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

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":

enter image description here

Upvotes: 1

Related Questions