I want to make my flutter display full screen, but with the status overlap on it. To make it more clear, i want the webview widget to overlap the status bar. Can someone help me with this?

For Example (as the image below):

enter image description here

My Code:

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

class test extends StatelessWidget{
  WebViewController _webViewController;
  String url = "https://linktomaps";
  @override
  Widget build(BuildContext context){
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
        body:Container(
            color: Colors.transparent,
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                    child: WebView(
                  initialUrl: url,
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (controller) {
                    _webViewController = controller;
                  },
                )),
              ),
            ]),
          ),
      ),
    );
  }
}

Result: enter image description here

But i test with other site , result : enter image description here

So now it make a confuse, is the website code cause the problem?


Solution 1: NqbraL

You can use the AnnotatedRegion widget with SystemUiOverlayStyle to change the chrome styles.

import 'package:flutter/services.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(...),
    );
  }
}


Solution 2: loushou

I believe what you actually want is for the status bar to ACTUALLY be gone, not just see-through. If that is your motivation here, then your proper method should look something like this:

import 'package:flutter/services.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
        body: Container(),
      ),
    );
  }

  void _hideStatusBar() {
    SystemChrome.setEnabledSystemUIOverlays(<SystemUiOverlay>[SystemUiOverlay.bottom]);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _hideStatusBar();
    }
  }

  @override
  void initState() {
    super.initState();
    _hideStatusBar();
    WidgetsBinding.instance.addObserver(this);
  }
}

There are two parts here.

First, you need to update the SystemChrome immediately when your app starts. Do this by doing the necessary updates in the initState function of your StatefulWidget main app widget.

Second, you need to make sure that your status bar is again removed if the user moves your app to the background and then back to the foreground. The reason is because whatever app they went to will probably show the statubar again, but it will not automatically go away again until you specifically tell it to.

Do this by adding with WidgetsBindingObserver so your main widget acts as a observer for events that trigger when the app is put back into the foreground. Then implement the didChangeAppLifecycleState(AppLifecycleState state) function to handle the event. You can even do things like show the status bar when the app is leaving the foreground if you want, using this method.

I hope this helps!