如何设置systemNavigationBarColor为透明？代码尝试后未生效

只设置systemNavigationBarColor: Colors.transparent通常不够，得搭配几个关键配置才能看到效果，试试下面的方案：

• 完整配置系统栏样式：除了透明背景，还要去掉导航栏的分割线，同时根据页面背景设置图标亮度（避免图标和背景混在一起）
• 让页面内容延伸到导航栏下方：如果页面内容没占满到导航栏区域，透明效果会不明显，需要开启extendBody

页面级配置示例 #

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent, // 移除导航栏分割线
      systemNavigationBarIconBrightness: Brightness.light, // 图标设为浅色，深色背景就用Brightness.dark
    ),
    child: Scaffold(
      extendBody: true, // 允许页面内容延伸到导航栏下方
      body: // 你的页面内容组件
    ),
  );
}

全局配置示例（所有页面生效） #

如果想让整个APP的导航栏都透明，可以在MaterialApp里设置：

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarDividerColor: Colors.transparent,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
    ),
  ),
  home: YourHomePage(),
);

另外注意：如果页面用了SafeArea，要确保它不会把导航栏区域排除在外，或者根据需求调整bottom参数。

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