Flutter Android端systemNavigationBarIconBrightness切回应用后异常恢复问题

该问题为Flutter Android端已知的系统UI样式异常，切后台时系统会暂时覆盖应用配置的导航栏样式，恢复前台时Flutter未主动重新同步配置导致样式失效，可通过以下方案解决：

解决方案 #

方案1：优先使用AnnotatedRegion组件（最简便，推荐） #

Flutter官方更推荐使用AnnotatedRegion组件来控制系统UI样式，而非一次性调用SystemChrome.setSystemUIOverlayStyle，该组件会在页面可见状态变化时自动重新应用配置的样式，不会被系统切后台的操作重置。
修改_MyHomePageState的build方法如下：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness: Platform.isAndroid ? Brightness.dark : Brightness.light,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarDividerColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark,
    ),
    child: Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
    ),
  );
}

同时可以删除main方法里的SystemChrome.setSystemUIOverlayStyle调用，避免重复配置冲突。

方案2：监听应用生命周期强制重设样式 #

如果需要全局统一控制所有页面的系统UI样式，可以通过监听应用生命周期，在应用切回前台时主动重新设置系统UI样式：

1. 在根页面的State中混入WidgetsBindingObserver，监听生命周期变化：

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  final SystemUiOverlayStyle _customStyle = SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Platform.isAndroid ? Brightness.dark : Brightness.light,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarDividerColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  );

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.resumed) {
      SystemChrome.setSystemUIOverlayStyle(_customStyle);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
    );
  }
}

方案3：原生层兜底配置 #

如果上述方案仍偶现失效，可以在Android原生层增加兜底逻辑，在MainActivity的onResume方法中强制设置导航栏图标属性：
修改安卓项目下app/src/main/kotlin/[你的包名]/MainActivity.kt：

import android.os.Build
import android.view.View
import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
  override fun onResume() {
    super.onResume()
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
      window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
    }
  }
}

上述代码会在Activity恢复时强制设置导航栏图标为深色，适配白色导航栏背景。

内容的提问来源于stack exchange，提问作者user1209216