How to prevent widgets from being shown in notification bar in flutter - flutter

Question

I have a code here for a simple webview. It simply displays a webpage. However, the top part of the webpage is shown stacked below the notification bar(As in some of the buttons on the top part of the page). How can I prevent this?
I know I can hide the notification bar/icons, but I want to show the contents of the webview widgets below the notification bar without hiding it. I also don't want to use an app bar. Kindly help me out
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
late WebViewController controller;
#override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
)),
debugShowCheckedModeBanner: false,
);
}
}

Answer 1

Just wrap your webviw with SafeArea
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
WebViewController controller;
#override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
),
)),
debugShowCheckedModeBanner: false,
);
}
}
output: