Flutter System导航栏和状态栏颜色 [英] Flutter System Navigation bar and Status bar color

问题描述

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

我认为它不在main.dart中，并且我需要遍历android系统文件，但是当我尝试编辑style.xml时，主题编辑器不允许我编辑任何颜色. /p>

任何帮助将不胜感激，我想拥有一个浅色的NavBar和一个浅色的AppBar.

解决方案

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

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

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

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

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

但是，如果您有多个设置此值的小部件，或者使用材质的AppBar或Cupertino NavBar，则它们的值可能会被覆盖.取而代之的是，您可以使用新的AnnotatedRegion API告诉flutter在可见某些小部件时自动切换到此样式.例如，如果您想在特定路线中随时使用以上主题，则可以将其包装在AnnotatedRegion小部件中，像这样.

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

但是，如果您弹出路线，则此不会将主题更改回先前的值

How do I change the system NavBar using Android Studio and flutter?

I presume it's not in the main.dart, and I need to go through the android system files, but when I tried to edit the style.xml, the theme editor didn't let me edit any of the colors.

Any help would be appreciated, I wanted to have a light NavBar to go with a light bottom AppBar.

解决方案

Note: this requires a more recent version of Flutter as it references APIs added in June 2018.

You can create a custom SystemUiOverlayStyle using the default constructor. The color of the system nav bar is defined there. But to avoid setting a lot of null values, use the copyWith method to update the values from an existing light/dark theme.

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

You can imperatively set the system nav color using the SystemChrome static methods.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

However, if you have multiple widgets which set this value, or use the material AppBar or Cupertino NavBar your value may be overwritten by them. Instead, you could use the new AnnotatedRegion API to tell flutter to automatically switch to this style anytime certain widgets are visible. For example, if you wanted to use the theme above anytime you are in a certain route, you could wrap it in an AnnotatedRegion widget like so.

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

This won't change your theme back to the previous value if you pop the route however

这篇关于Flutter System导航栏和状态栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！