如何移除Flutter应用暗黑模式下部分设备的底部白线？

这种底部白线通常是系统导航栏与应用布局的适配问题，结合OnePlus设备的系统UI特性，以下是几种可行的修复方案：

• 强制同步导航栏与主题颜色
  在暗黑模式下，把系统导航栏背景色设置为和应用深色主题一致，覆盖系统默认样式。可以直接在MaterialApp的主题配置里修改：

  MaterialApp(
    theme: ThemeData.light(),
    darkTheme: ThemeData.dark().copyWith(
      appBarTheme: const AppBarTheme(
        systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.black, // 匹配暗黑模式背景色
          systemNavigationBarContrastEnforced: false,
        ),
      ),
    ),
    home: const YourHomePage(),
  );
  

  也可以在页面初始化时动态适配：

  @override
  void initState() {
    super.initState();
    if (WidgetsBinding.instance.window.platformBrightness == Brightness.dark) {
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.black,
      ));
    }
  }
  

• 排查布局冗余设置
  检查页面底部是否有多余的Padding、Margin组件，或是Scaffold的bottomNavigationBar、persistentFooterButtons是否带了不必要的边框。另外可以开启Scaffold的extendBody属性，让内容延伸到导航栏下方：

  Scaffold(
    extendBody: true,
    backgroundColor: Colors.black, // 暗黑模式背景色
    body: YourContent(),
  );
  

• 关闭系统导航栏对比度增强
  OnePlus部分系统版本会强制开启导航栏对比度增强，导致浅色线条出现。可以通过以下代码关闭该特性：

  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarContrastEnforced: false,
  ));
  

• 检查设备系统设置
  部分用户可能开启了OnePlus的「导航栏手势提示」功能，这条白线是系统自带的提示线。可以引导用户在设备设置中关闭：设置 → 显示 → 导航栏 → 关闭「手势提示线」（不同系统版本路径可能略有差异）。

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