Is there a way to remove this blankspace from this flutter webapp on Firefox Mobile?

Issue

I am trying to do a responsive webapp and everything was working fine debugging it on the desktop firefox and I did the entire layout with the switch device option in the debug tools, but when I uploaded to an HTTP server and access it through my phone I get this screen

This is a reproduction

On chrome I have no problems and everything displays just right, on firefox on the other hand I have that weird blank space… At chrome that space was occupied by the "add to the homescreen" prompt, maybe that has something to do?
Any ideas would be greatly apreciated. I’m leaving the code just in case it helps…

void main() => runApp(MyApp2());

class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Container(
          color: Colors.red,
          // child: Text('Hello World'),
        ),
      ),
    );
  }
} 

I guess its useful to say that on chrome I get the expected behaviour of getting the full screen red except for the AppBar

Solution

Add to Homescreen button is feature of PWA so you should dive into index.html probably. Can you debug your Firefox Mobile and play with css a little bit. You can check official Firefox Remote Debugging Docs.

Answered By – Göktuğ Vatandaş

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.