Flutter中的透明状态栏

Question

我刚开始使用Flutter和Android Studio，并想知道是否有办法在Android上创建一个透明的状态栏（与AppBar之间没有过渡）。当我尝试设置状态栏颜色时，它会得到与AppBar不同的阴影。

- Valeh

Answer 1

您可以使用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(...),
    );
  }
}

您可以在此处详细了解SystemUiOverlayStyle的可能性。

- Sander Dalby Larsen

Answer 2

是的，这在Android上是可能的。

要做到这一点，您可以使用SystemChrome。该类提供了一个setSystemUIOverlayStyle方法，您可以像这样使用它:

import 'package:flutter/services.dart';

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

请记住，这仅适用于Android版本等于或大于Android M，并且您需要通过避免Scaffold自动添加的填充来在状态栏下绘制。您可以通过使用以下代码来实现：

...body: SafeArea(top: false, child: ...

- creativecreatorormaybenot

Answer 3

在main.dart文件运行应用程序之前，您还可以广泛地使用app进行操作：

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

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
}

- Mahdi Dahouei

Answer 4

推荐 (使用Flutter 2.0)

不要像文档中所提到的那样使用AnnotatedRegion

应用程序不应该用自己的AnnotatedRegion包含一个AppBar。

首选方法是使用systemOverlayStyle属性:

Scaffold(
  appBar: AppBar(
    systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  ),
)

- CopsOnRoad

---

"backwardsCompatibility"已被弃用，不应再使用。该属性已过时，默认为false。此功能在v2.4.0-0.0之后被弃用。鼓励应用程序开发人员通过将其保持默认值（false）并根据需要使用“foregroundColor”和“systemOverlayStyle”属性来选择新功能。 - Ugo

@Ugo 感谢您指出这一点，它将被弃用。我已经更新了代码。 - CopsOnRoad

Answer 5

@sander-dalby-larsen的解决方案完美地奏效了，但是状态栏图标的颜色成为一个问题。下面的解决方案将状态栏设置为透明，状态栏图标和导航栏的颜色为黑色。

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // transparent status bar
          systemNavigationBarColor: Colors.black, // navigation bar color
          statusBarIconBrightness: Brightness.dark, // status bar icons' color
          systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
        ),
        child: Scaffold(
          body: _getBody(context),
        ),
      ),
    );
  }

- Rohan Kandwal

---

这解决了一个问题，但又产生了另一个问题。如果你导航到另一个屏幕然后返回，它会再次恢复原状。因此状态栏是透明的，但状态栏图标又变成白色了。 - Faizan Mubasher

这是一个更好的解决方案，特别是如果你在 main.dart 中返回 StreamProvider。 - Ruan

@FaizanMubasher，你找到后退导航问题的解决方案了吗？ - David Miguel

Answer 6

我正在寻找同样的解决方案，我找到了一种方法来实现这个功能。 透明状态栏图标 只需在您的Widget build(BuildContext context){}中添加以下几行代码即可。 在使用暗色主题时，它会使状态栏变为透明，并将图标变为白色。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.light));

同样适用于浅色主题。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.dark));

我不确定你是在寻找这个还是其他什么，但对我来说，这个完全可以正常使用。

- pipaliya ashish

Answer 7

这将帮助使您的状态栏透明。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark, // dark text for status bar
      statusBarColor: Colors.transparent));

例如：

- Nisha Jain

Answer 8

最简单的方法是导入services.dart并使用SystemUIOverlayStyle：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(NameOfYourApp());
}

- Brian

Answer 9

只需在Scafold body参数周围进行填充即可。

Scaffold(
         body: Padding(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), //this
            child: Widget
        )

如果你的脚手架有 appBar

Scaffold(        
      appBar: AppBar(
                brightness: Brightness.dark, //this
      body: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Widget
        )

- Yash Zade