When web application is installed as a PWA, SafeAreas always return EdgeInsets.zero, meaning no paddings are added anywhere in the application. This causes overlapping issues, for example, with phones having some kind of notches or bottom navigation over screen.
Steps to reproduce
Build and deploy (e.g. with dhttpd) web application.
Launch it from a mobile device that has a notch or gesture-like bottom navigation.
Add the application to home screen as a PWA.
Launch PWA and notice all SafeAreas missing its paddings.
What is the current bug behavior?
SafeArea doesn't work in PWAs.
What is the expected correct behavior?
SafeArea correctly adds paddings of the screen insets.
Possible fixes
This should be fixed by the Flutter framework, however I can suggest the following workaround: perhaps we may create some kind of div element or use a JavaScript method to retrieve the paddings from the HTML window and then apply those paddings?
Summary
When web application is installed as a PWA,
SafeAreas always returnEdgeInsets.zero, meaning no paddings are added anywhere in the application. This causes overlapping issues, for example, with phones having some kind of notches or bottom navigation over screen.Steps to reproduce
dhttpd) web application.SafeAreas missing its paddings.What is the current bug behavior?
SafeAreadoesn't work in PWAs.What is the expected correct behavior?
SafeAreacorrectly adds paddings of the screen insets.Possible fixes
This should be fixed by the Flutter framework, however I can suggest the following workaround: perhaps we may create some kind of
divelement or use a JavaScript method to retrieve the paddings from the HTML window and then apply those paddings?