Flutter System导航栏和状态栏颜色

Question

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

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

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

Answer 1

注意：这需要Flutter的最新版本，因为它引用了上周添加的API。

。

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

const mySystemTheme= StyleUiOverlayStyle.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(),
  );
}

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

Answer 2

您可以使用SystemChrome类来更改状态栏和导航栏的颜色。

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarColor: Colors.blue, // navigation bar color
  statusBarColor: Colors.pink, // status bar color
));

Answer 3

您可以简单地致电SystemChrome.setSystemUIOverlayStyle：

import 'package:flutter/services.dart

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);