How do I remove the top padding for iOS?

[ChrisFetterly]

Hi, I'm quite new to flutter and programming in general. I'm wondering how to remove the top padding that is present for iOS. I looked in scaffold.dart but I'm quite confused on which parameters to adjust. Ideally, I'd like my WebViews scaffold to fill into the safe area. I'd like the WebView to extend right to the top of the phone. Would like there to be no white area as shown in the photo.

Thanks!

[joasag]

@ChrisFetterly +1 Wondering the same thing. Plus the lower area. I want to extend the webview to cover the whole screen.

[fideldonson]

Seeing the same problem. Did any of you solve it?

[joasag]

Seeing the same problem. Did any of you solve it?

Sadly not, I have tried contacting the developer directly via Twitter, but he just told me to use webview_flutter. But I can't, as that has no keyboard functionality at the moment. I have spent days trying to solve this. I really hope some dev picks this up!

[fideldonson]

I see two approaches in the mean time:

1. Check if it can be handled somehow in the html - fx by limiting overflow or placing content outside the window.
2. Setup the webview inside a custom rectangle with
   flutterWebviewPlugin.launch(url, fullScreen: false, rect: new Rect.fromLTWH( 0.0, 0.0, MediaQuery.of(context).size.width, 300.0, ), );

[joasag]

I see two approaches in the mean time:

1. Check if it can be handled somehow in the html - fx by limiting overflow or placing content outside the window.
2. Setup the webview inside a custom rectangle with
   flutterWebviewPlugin.launch(url, fullScreen: false, rect: new Rect.fromLTWH( 0.0, 0.0, MediaQuery.of(context).size.width, 300.0, ), );

Have you tested any of the approaches? Does it work?

[fideldonson]

I have not tested yet. Will post back here when i do.

[joasag]

I have not tested yet. Will post back here when i do.

I am eager to hear the results!

[fideldonson]

Well - it turns out that my problem is the opposite of what you are reporting. I am seeing webview content behind the notch and bottom button that i wanted to hide - see the photo.

Here is the code i use to place the webview in the tree:
Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false, body: WebviewScaffold( url: urlString, appCacheEnabled:false, clearCache: true, clearCookies: false, withLocalStorage: true, withZoom: false, displayZoomControls: false, ),);

[joasag]

Well - it turns out that my problem is the opposite of what you are reporting. I am seeing webview content behind the notch and bottom button that i wanted to hide - see the photo.

Here is the code i use to place the webview in the tree:
Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false, body: WebviewScaffold( url: urlString, appCacheEnabled:false, clearCache: true, clearCookies: false, withLocalStorage: true, withZoom: false, displayZoomControls: false, ),);

Does the code you posted produce what you show on the screenshot? Because that is what I am looking for. A true full sceen/immersive mode.

[fideldonson]

That is exactly what it does. And thats what i thought might interest you.

[vasilich6107]

The emulator still has gaps...
Maybe it will differ on real device.
@fideldonson what flutter version are you using?

[vasilich6107]

@ChrisFetterly @jockebq
this helped me

_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((state) {
      if (state.type == WebViewState.finishLoad) {
        flutterWebviewPlugin.resize(Rect.fromLTRB(
          MediaQuery.of(context).padding.left,

          /// for safe area
          -MediaQuery.of(context).padding.top,

          /// for safe area on android
          MediaQuery.of(context).size.width + 1,

          /// add one to make it fullscreen
          MediaQuery.of(context).size.height +
              MediaQuery.of(context).padding.bottom,
        ));
      }
    });

[vasilich6107]

This is a case when you want AppBar to be visible - just another math

_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((state) {
      if (state.type == WebViewState.finishLoad) {
        flutterWebviewPlugin.resize(Rect.fromLTRB(
          MediaQuery.of(context).padding.left,
          MediaQuery.of(context).padding.top + kToolbarHeight,
          MediaQuery.of(context).size.width + 1,
          MediaQuery.of(context).size.height +
              MediaQuery.of(context).padding.bottom,
        ));
      }
    });

[joasag]

@ChrisFetterly @jockebq
this helped me

_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((state) {
      if (state.type == WebViewState.finishLoad) {
        flutterWebviewPlugin.resize(Rect.fromLTRB(
          MediaQuery.of(context).padding.left,

          /// for safe area
          -MediaQuery.of(context).padding.top,

          /// for safe area on android
          MediaQuery.of(context).size.width + 1,

          /// add one to make it fullscreen
          MediaQuery.of(context).size.height +
              MediaQuery.of(context).padding.bottom,
        ));
      }
    });

Wow, that does seem to work! It does fill out the iPhone X screen fully. But I am having trouble once I start to navigate the page and clicking input fields. Then it starts to resize up and down. Is there any way to make this more permanent? As it seems to be "redone" each time it has finished loading?

[vasilich6107]

Try to add resize flag

      if (state.type == WebViewState.finishLoad && !resized) {
        resized = true;
        ...
      }
    });

[fedotxxl]

_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((state) {
      if (state.type == WebViewState.finishLoad) {
        flutterWebviewPlugin.resize(Rect.fromLTRB(
          MediaQuery.of(context).padding.left,

          /// for safe area
          -MediaQuery.of(context).padding.top,

          /// for safe area on android
          MediaQuery.of(context).size.width + 1,

          /// add one to make it fullscreen
          MediaQuery.of(context).size.height +
              MediaQuery.of(context).padding.bottom,
        ));
      }
    });

I've found that the following HTML will be displayed incorrectly (looks like because of vh):

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body style="margin: 0">
<div style="position: relative; height: 100vh; background: green">

<div style="position: absolute; top: 0; left: 0; right: 0; height: 50px; background: red">hello!</div>

<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background: blue">hello!</div>
</div>
  <script src="js/scripts.js"></script>
</body>
</html>