weird white top bar on my flutter application on iphone

Question

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.

white top bar

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

Answer 1

SafeArea widget constraints the body to exclude AppBar height and StatusBar height. If you want to display the webview on the whole screen then you should remove the SafeAres and extendBody and extendBodyBehindAppBar parameters.

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() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.black, // status bar color
    ));
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:  Scaffold(
        extendBody: true,
        extendBodyBehindAppBar: true,
        body: 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',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}