Приложение на весь экран, но с перекрытием строки состояния

Question

Я хочу, чтобы мой флаттер отображался в полноэкранном режиме, но с перекрытием статуса. Чтобы было понятнее, я хочу, чтобы виджет веб-просмотра перекрывал строку состояния. Может кто-то помочь мне с этим?

Например (как на картинке ниже):

Мой код:

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

Результат:

Но я тестирую с другим сайтом, результат:

Так что теперь это сбивает с толку, это код сайта вызвать проблему?

Answer 1

Я верю, что вы действительно хотите, чтобы строка состояния фактически исчезла, а не просто просвечивалась. Если это ваша мотивация, то ваш правильный метод должен выглядеть примерно так:

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);
  }
}

Здесь есть две части.

Первая , вам необходимо обновить SystemChrome сразу после запуска вашего приложения. Сделайте это, выполнив необходимые обновления в функции initState основного виджета StatefulWidget.

Второй , вам необходимо убедиться, что ваша строка состояния снова удалена, если Пользователь перемещает ваше приложение в фоновый режим, а затем обратно на передний план. Причина в том, что в любом приложении, к которому они обращались, возможно, снова будет отображаться статубар, но он не будет автоматически go снова исчезать, пока вы не укажете его.

Сделайте это, добавив with WidgetsBindingObserver, чтобы ваш основной виджет действует как наблюдатель для событий, которые запускаются, когда приложение возвращается на передний план. Затем реализуйте функцию didChangeAppLifecycleState(AppLifecycleState state) для обработки события. Используя этот метод, вы даже можете, например, показывать строку состояния, когда приложение покидает передний план.

Надеюсь, это поможет!

Answer 2

Вы можете использовать виджет AnnotatedRegion с SystemUiOverlayStyle для изменения стилей chrome.

import 'package:flutter/services.dart';

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