Question

如何在Flutter App中隐藏Android状态栏？

Answer 1

SystemChrome.setEnabledSystemUIOverlays([])应该做你想做的事。

您可以使用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)将其恢复。

使用

导入它

import 'package:flutter/services.dart';

Answer 2

import 'package:flutter/services.dart';

1。隐藏状态栏

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])

2。透明状态栏

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
 ));

3。显示状态栏

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

Answer 3

对于单页（在页面文件中）：

@override
  void initState() {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    super.initState();
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIOverlays(
        [SystemUiOverlay.top, SystemUiOverlay.bottom]);
    super.dispose();
  }

对于所有页面（在main.dart中）：

void main() {
  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'Poppins'),
      home: SplashScreen()));
}

别忘了import 'package:flutter/services.dart'

Answer 4

您可以使用SystemChrome.setEnabledSystemUIOverlays([])隐藏并使用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)将其重新带回。

但是，目前会有轻微的灰色区域，目前还没有解决方法。隐藏状态栏时，应用栏的高度保持不变。

请参阅github问题：https://github.com/flutter/flutter/issues/14432

Answer 5

第一步：在软件包下面导入

import 'package:flutter/services.dart';

Step2：将以下代码添加到您的类初始化状态中，如下所示

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    SystemChrome.setEnabledSystemUIOverlays([]);

  }

Answer 6

i：隐藏状态栏： SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

ii：使用SafeArea Widget可以确保您的应用程序不占用状态栏区域。

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
            child: Text('Do not take status bar area on screen!'),
          ),
        );
}

Answer 7

乔纳·威廉姆斯（Jonah Williams）的这一评论在某些情况下可能也会有所帮助 https://github.com/flutter/flutter/issues/24472#issuecomment-440015464 如果您不希望AppBar覆盖状态栏颜色。

您无法为应用程序栏提供状态栏颜色，但是您可以   创建自己的带注释的区域。现在还不是很直观   但是您可以使用Folder覆盖子带注释的区域   由应用栏创建。

在某个地方，也许是脚手架的孩子：
sized: false
请注意，并非所有的Android版本都支持状态栏颜色或图标亮度。请参阅SystemUiOverlayStyle上的文档以了解注意事项。

Answer 8

您可以在主要功能中添加以下代码以隐藏状态栏。

IN

Answer 9

导航到AndroidManifest.xml并使用此主题

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

Answer 10

首先将SystemChrome.setEnabledSystemUIOverlays([]);添加到您的Main函数中。

这会留下一个灰色的区域，如先前的答案所述。

对此我有一个简单的解决方法（只是一种解决方法，尽管在大多数情况下都可以使用）。

在AppBar()中只需添加

backgroundColor: Colors.transparent,
elevation: 0.0,

我希望这对您有帮助

Answer 11

 body: MyAppBody(),

更改为

body: SafeArea(child: MyAppBody()),

Answer 12

要实现此功能，您将需要 Flutter 服务 API。

实现它的示例步骤：

您需要导入 package:flutter/services.dart。
将 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) 放在有状态小部件的 initState 方法中。
将 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]) 放在有状态小部件的 dispose 方法中，以在您从该屏幕返回时重新启用状态栏。

示例代码：

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

void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyApp(),
        );
      }
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
        super.initState();
      }
      @override
      void dispose() {      
        SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top,SystemUiOverlay.bottom]);
        super.dispose(); 
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Sample App'),
          ),
          body: Center(
            child: Container(
              child: Text('Demo Screen.'),
            ),
          ),
        );
      }
    }

注意事项：

将 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) 放在小部件的 build 方法中不是一个好主意，因为每次你的小部件重建时都会执行 build 方法，这会损害你的应用性能，并可能导致奇怪的错误，比如出现和消失的状态栏或底部导航。
在 Android 上，如果您有一些需要使用键盘的输入字段，状态栏将再次出现，您需要使用其他方法 SystemChrome.restoreSystemUIOverlays() 来防止这种情况发生或使用 {{1} 重新设置} 你可以在这里找到更多信息https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) 是异步的

在Flutter App上隐藏Android状态栏

12 个答案:

1。隐藏状态栏

2。透明状态栏

3。显示状态栏