Web viewport-fit=cover SafeArea support

Flutter web now honors viewport-fit=cover in your web/index.html <meta name="viewport"> tag and populates FlutterView.viewPadding, MediaQuery.paddingOf, and SafeArea from the browser's CSS env(safe-area-inset-*) values.

If an existing web application already includes viewport-fit=cover in web/index.html, it now renders edge-to-edge behind mobile device cutouts, notches, and home indicators instead of having viewport-fit=cover stripped by the web engine.

Previously, when initializing in full-page mode, the Flutter web engine replaced any <meta name="viewport"> tag in web/index.html with a default viewport tag that omitted viewport-fit=cover, and always reported FlutterView.viewPadding as ViewPadding.zero.

To let mobile web applications render edge-to-edge on devices with display cutouts and notches, Flutter web now inspects the <meta name="viewport"> tag in web/index.html before replacing it:

• When viewport-fit=cover is not set (the default), Flutter web renders within the browser's safe area (viewport-fit=contain) and reports ViewPadding.zero.
• When viewport-fit=cover is set in web/index.html, Flutter web preserves viewport-fit=cover on the active <meta name="viewport" flt-viewport> tag. It then measures the browser's CSS env(safe-area-inset-*) values and exposes them through FlutterView.viewPadding, MediaQuery.paddingOf, and SafeArea.

You are affected only if your existing web/index.html file already specifies viewport-fit=cover in its <meta name="viewport"> tag.

If you want your web app to render edge-to-edge behind notches and home indicators, wrap your interactive content in a SafeArea widget (or read MediaQuery.paddingOf) so controls are not obscured by system cutouts:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: MyAppContent(),
    ),
  );
}

If you do not want edge-to-edge rendering on mobile browsers, remove viewport-fit=cover from <meta name="viewport"> in web/index.html:

Code before migration:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Code after migration:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In stable release: 3.50

API documentation:

• FlutterView.viewPadding
• MediaQuery.paddingOf
• SafeArea

Relevant issues:

• Issue 84833

Relevant PRs:

• PR 191647