App Full Screen but with status bar overlap on it

Question

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):

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:

But i test with other site , result :

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

Answer 1

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(...),
    );
  }
}