Flutter中如何将底部导航栏设置为任意颜色？

你用AnnotatedRegion没生效，大概率是层级配置不对，或者缺少必要的图标亮度设置（避免图标和背景色冲突导致系统自动调整）。下面给你几种可行的实现方式：

一、全局配置（应用所有页面生效） #

在MaterialApp的主题中统一设置，适合整个应用保持一致的导航栏样式：

MaterialApp(
  theme: ThemeData(
    systemOverlayStyle: const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.yellow, // 底部导航栏背景色
      systemNavigationBarDividerColor: Colors.red, // 导航栏分割线颜色（仅Android 8.0+生效）
      systemNavigationBarIconBrightness: Brightness.dark, // 图标颜色，背景浅时设为dark，深时设为light
    ),
  ),
  home: const YourHomePage(),
);

二、页面单独配置 #

如果只是某一个页面需要自定义导航栏颜色，确保AnnotatedRegion包裹整个页面的Scaffold：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.yellow,
      systemNavigationBarDividerColor: Colors.red,
      systemNavigationBarIconBrightness: Brightness.dark,
    ),
    child: Scaffold(
      appBar: AppBar(title: const Text('自定义导航栏')),
      body: const Center(child: Text('页面内容')),
    ),
  );
}

三、动态切换导航栏颜色 #

如果需要在页面生命周期内动态修改，比如进入页面时设置，离开时恢复默认样式：

@override
void initState() {
  super.initState();
  // 进入页面时设置导航栏样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.yellow,
    systemNavigationBarDividerColor: Colors.red,
    systemNavigationBarIconBrightness: Brightness.dark,
  ));
}

@override
void dispose() {
  // 离开页面时恢复默认样式
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('动态设置')),
    body: const Center(child: Text('内容区域')),
  );
}

注意事项 #

• systemNavigationBarDividerColor仅支持Android 8.0（API 26）及以上版本，低版本系统会忽略这个设置
• 如果导航栏背景色和图标颜色对比度不够，系统会自动调整图标颜色，所以必须显式设置systemNavigationBarIconBrightness确保样式生效
• iOS的底部Home Indicator无法直接修改颜色，只能通过调整页面背景色或使用SafeArea避免内容被遮挡

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