I recently made my own app in flutter and it is working great. the only thing i noticed is that i have this weird white top bar when looking at it on an iphone.

i added an image to show you what i mean.

when it is tested on an android phone the white bar does not exist

this is my code from main.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:google_nav_bar/google_nav_bar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;
  final List<String> _urls = [
    "https://minecraft.xandersalarie.com/",
    "https://minecraft.xandersalarie.com/status",
  ];
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _controller.loadUrl(_urls[index]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:  Scaffold(
        appBar: AppBar(
          systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.black),
        ),
        body: SafeArea(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height:MediaQuery.of(context).size.height ,
            child: WebView(
              backgroundColor: Colors.black,
              initialUrl: _urls[_selectedIndex],
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController webViewController) {
                _controller = webViewController;
              },
            ),
          ),
        ),
        bottomNavigationBar:  Container(
          color: Colors.black,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0,
            vertical: 18),
            child: GNav(
              backgroundColor: Colors.black,
              color: Colors.white,
              activeColor: Colors.white,
              tabBackgroundColor: Colors.white24,
              gap: 8,
              selectedIndex: _selectedIndex,
              onTabChange: _onItemTapped,
              padding: const EdgeInsets.symmetric(horizontal: 25,
              vertical: 10),
              tabs: const [
                GButton(icon: Icons.home,
                text: 'Home',
                ),
                GButton(icon: Icons.stacked_bar_chart_outlined,
                text: 'Status',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

i’ve tried many things like wrapping my webview element in a container and using

width: MediaQuery.of(context).size.width, height:MediaQuery.of(context).size.height ,

i’ve also tried changing the appbar with:

appBar: AppBar( systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.black), ),

within the scaffold. this also did not work.

what my goal is to get m webview full screen (or like on android immersive mode). i don’t know if this can be achieved with padding or if i have to edit something within the ios folder for my flutter project