Flutter状态栏透明

Question

如何使状态和选项栏（底部）透明？

想了很多办法还是黑底白字

这是我已经实现的代码：

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
...
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemStatusBarContrastEnforced: true,
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.light));

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

runApp(...)

在我的 Material 应用中：

return MaterialApp.router(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
            //systemOverlayStyle: SystemUiOverlayStyle.light,
            backgroundColor: Colors.transparent),
      ),
      color: Colors.transparent,
...

我知道 AppBar 和状态栏不一样（只是想包括它）。提前致谢。

更新：

我试图删除 Safearea，它显然与状态和导航栏冲突。结果是：

到现在还不是很透明，底部也乱了。有什么想法吗？

Answer 1

假设隐藏没问题：

import 'package:flutter/services.dart';

隐藏所有内容：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);

只隐藏底部：

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

把它们带回来：

  @override
  void dispose() {
    super.dispose(); 
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);  // to re-show bars
  }

归功于此。

Answer 2

我最近也遇到了这个问题。

我的解决方案是

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light
));

在我的例子中，safearea 干扰了使它仍然显示黑色和白色文本的更改。我建议您也在物理设备上进行测试。

Answer 3

正如 Frank Nike 所建议的，SafeArea 小部件与

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light
));

因此，为我解决问题的方法是完全删除 SafeArea 并设置：

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

Flutter状态栏透明

Flutter Status Bar transparent

android

flutter

dart

statusbar

android-statusbar