How do I crop the size of my WebView in Flutter?

Question

I am loading a WebView Page in one of my NavBar items. When I debug my app it shows me a loading screen with the NavBar but as soon as the WebView loads the NavBar gets hidden behind it. I'm using the webview_flutter plugin to load the WebViews.

This is what happens after the WebView has loaded:

This is the code for my WebView Page:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class HomeWebView extends StatefulWidget {
  @override
  _HomeWebViewState createState() => _HomeWebViewState();
}

class _HomeWebViewState extends State<HomeWebView>
    with AutomaticKeepAliveClientMixin<HomeWebView> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return WebviewScaffold(
      useWideViewPort: true,
      url: 'https://google.com',
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Is there a way where I can crop the size of my WebView Scaffold so that the NavBar below is visible and functional?

Answer 1

You can achieve this by using SafeArea widget:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class HomeWebView extends StatefulWidget {
  @override
  _HomeWebViewState createState() => _HomeWebViewState();
}

class _HomeWebViewState extends State<HomeWebView>
    with AutomaticKeepAliveClientMixin<HomeWebView> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return SafeArea(
      child: WebviewScaffold(
      useWideViewPort: true,
      url: 'https://google.com',
    ));
  }

  @override
  bool get wantKeepAlive => true;
}