status bar overlapping my WebView screen, how to fix this? - flutter

Question

I am building APK for my web app but the upper part of the web app is overlapped by the status bar
I want to show the status bar but not overlap my Webview, Webview must use screen size except status bar
check screenshot of the problem
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const myapp());
}
// ignore: camel_case_types
class myapp extends StatelessWidget {
const myapp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Sample App",
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const Scaffold(
appBar: null ,
body: WebView(
initialUrl: 'https://primexop.com/motap/appw1/index.php?app_v=1.001010&ow_id=101',
javascriptMode: JavascriptMode.unrestricted,
)),
);
}
}

Answer 1

wrap your Scaffold or WebView with SafeArea Widget
check the code below which fixes this issue
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const myapp());
}
// ignore: camel_case_types
class myapp extends StatelessWidget {
const myapp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Sample App",
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const SafeArea(
child: Scaffold(
appBar: null,
body: WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://primexop.com/motap/appw1/index.php?app_v=1.001010&ow_id=101",
)),
),
);
}
}
I used SafeArea to wrap the Scaffold
Result screenshot