dart - Flutter 系统导航栏和状态栏颜色

Question

这个问题在这里已经有了答案:

How to change Status Bar and App Bar color in Flutter? (9 个回答)

关闭 3年前。

如何使用 Android Studio 和 Flutter 更改系统 NavBar？

我认为它不在main.dart中，我需要通过android系统文件，但是当我尝试编辑style.xml时，主题编辑器不允许我编辑任何颜色。

任何帮助将不胜感激，我希望有一个轻型 NavBar 与一个轻型底部 AppBar。

Answer 1

注意:这需要更新版本的 Flutter，因为它引用了 2018 年 6 月添加的 API。

您可以使用默认构造函数创建自定义 SystemUiOverlayStyle。系统导航栏的颜色在那里定义。但为避免设置大量空值，请使用 copyWith 方法从现有的明暗主题更新值。

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

您可以使用 SystemChrome 静态方法强制设置系统导航颜色。

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

但是，如果您有多个设置此值的小部件，或者使用 Material AppBar 或 Cupertino NavBar，您的值可能会被它们覆盖。相反，您可以使用新的 AnnotatedRegion API 告诉 Flutter 在某些小部件可见时自动切换到此样式。例如，如果您想在某个 route 的任何时候使用上面的主题，您可以像这样将其包装在 AnnotatedRegion 小部件中。

Widget myRoute(BuildContext context) {
  return new AnnotatedRegion<SystemUiOverlayStyle>(
    value: mySystemTheme,
    child: new MyRoute(),
  );
}

如果您弹出路线，这不会将您的主题更改回之前的值