如何在 Flutter 中隐藏 Android StatusBar

Question

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

Answer 1

SystemChrome.setEnabledSystemUIOverlays([]) 随心所欲。

你可以用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)把它带回来。

使用

导入

import 'package:flutter/services.dart';

更新答案（来自 Flutter 2.5 或最新版本）：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);

或者您可以使用其他选项，例如：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
  SystemUiOverlay.bottom
]);  // to hide only bottom bar

然后当你需要重新显示它时（比如处理时）使用这个：

  @override
  void dispose() {
    super.dispose();

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);  // to re-show bars

  }

Answer 2

您可以使用 SystemChrome.setEnabledSystemUIOverlays([]) 隐藏并使用 SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values) 再次将其取回。

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

查看 github 问题：https://github.com/flutter/flutter/issues/14432

Answer 3

Jonah Williams 的这条评论在某些情况下也可能有帮助 https://github.com/flutter/flutter/issues/24472#issuecomment-440015464 如果您不希望状态栏颜色被 AppBar 覆盖。

You cannot provide a status bar color to the app bar, but you can create your own annotated region. It's not very intuitive right now, but you can use sized: false to override the child annotated region created by the app bar.

Somewhere, perhaps as a child of the scaffold:
Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(...),
    sized: false,
    child: ...
  )
);
Note that not all Android versions support status bar color or icon brightness. See the documentation on SystemUiOverlayStyle for the caveats.

Answer 4

您可以在主函数中添加以下代码来隐藏状态栏。

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

Answer 5

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

如之前的回答所述，这会留下轻微的灰色区域。

我有一个简单的解决方法（只是一个解决方法，但在大多数情况下都有效）。

在AppBar()中添加

backgroundColor: Colors.transparent,
elevation: 0.0,

希望对您有所帮助

Answer 6

import 'package:flutter/services.dart';

1.Hide 状态栏

SystemChrome.setEnabledSystemUIMode([SystemUiOverlay.bottom])

2.透明状态栏

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

3.Show 状态栏

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

您需要将此代码放在：

1.For单屏

@override
  void initState() {
    // put it here
    super.initState();
  }

2.For main.dart 中的所有页面：

 void main() {
      // put it here
      runApp(...);
  }

Answer 7

第一步：导入下面的包

import 'package:flutter/services.dart';

第 2 步：将以下代码添加到您的 class 初始状态，如下所示

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

  }

Answer 8

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

@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 9

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 10

 body: MyAppBody(),

将此更改为

body: SafeArea(child: MyAppBody()),

Answer 11

要实现此功能，您将需要 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]) 放在小部件的构建方法中不是一个好主意，因为每次重建小部件时都会执行构建方法，这会损害您的应用程序性能并可能导致奇怪的错误比如状态栏或底部导航栏的出现和消失。
在 Android 上，如果您有一些需要使用键盘的输入字段，状态栏将再次出现，您将需要使用其他方法 SystemChrome.restoreSystemUIOverlays() 来阻止或设置它再次使用 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) 更多信息，您可以在此处找到相关信息 https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
SystemChrome.setEnabledSystemUIOverlays()是异步的

Answer 12

以下内容在 v2.3.0-17.0 之后已弃用

 SystemChrome.setEnabledSystemUIOverlays

为了在整个应用程序（不仅仅是一个屏幕）中隐藏状态栏，我在

中声明的应用程序主题中使用了以下两个属性

android -> app -> src -> main -> res -> values -> styles.xml

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

现在状态栏从初始屏幕到我的应用程序的任何屏幕都不可见。

Answer 13

从 flutter 2.5 开始，setEnabledSystemUIOverlays 已弃用，您可以通过以下方式消除状态栏：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

并还原它

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

您还可以将 List<SystemUiOverlay>? overlays 作为较旧的答案状态作为第二个命名参数传递给函数，如下所示：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,overlays: [])

在列表中，您可以通过将列表留空来指定是否显示 SystemUiOverlay.bottom、SystemUiOverlay.top 或 none []

感谢 Pierre 编辑：

详细了解不同的 SystemUiModes here：

Answer 14

以上某些内容已弃用，取而代之的是：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: [SystemUiOverlay.bottom]);

我发现奇怪的是，我将它放在第二个屏幕的 initState 中而不是应用程序的 void main 中，但它仍然应用于我的所有屏幕。

https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIMode.html

Answer 15

由于 Flutter 2.5 在 Android.

上支持各种全屏模式，因此这些答案中的大部分都已过时

现在，隐藏状态栏的建议方法是：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

您可以将 SystemUiMode 设置为以下任何一项SystemUiMode enums:

身临其境
沉浸式粘性
靠背
边到边

Answer 16

对我来说 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); 效果最好。这样，如果你在底部向上滑动，状态栏和导航栏会透明显示，如果你触摸其他地方，它们会在一段时间后消失。

使用SystemUiMode.immersive，从底部向上滑动状态栏会永久显示，导航栏是不透明的。

使用SystemUiMode.leanBack，导航栏向上滑动永久显示，不透明。

如何在 Flutter 中隐藏 Android StatusBar

How to hide Android StatusBar in Flutter

flutter

android-statusbar

1.Hide 状态栏

2.透明状态栏

3.Show 状态栏

您需要将此代码放在：