Flutter Web PWA Top Notch gets cut off

Question

I want to create a PWA using Flutter web but on iPhone X Models the top notch gets cut off.

Expected:

Actual:

The code I used:

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: CupertinoPageScaffold(child: Center(child: Text("PWA")))));
}

I tried changing the meta tag in the index.html to:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>

But this does not support dark mode. Does any one got a better idea to solve this?

Answer 1

You can wrap your widget in safe area to prevent your app having such problems.

SafeArea(
   child: Text("PWA"),
 ),

Happy coding...