Flutter横屏模式下移除应用内边距及左侧黑线问题求助

以下是几个针对性的解决步骤，可逐一尝试：

1. 移除MediaQuery默认内边距 #

Flutter的MediaQuery会自动添加适配系统UI的内边距，即使隐藏了系统UI，该内边距可能依然残留。可以在根Widget中用MediaQuery.removePadding包裹，强制移除所有方向的内边距：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      context: context,
      removeLeft: true,
      removeTop: true,
      removeRight: true,
      removeBottom: true,
      child: MaterialApp(
        home: Scaffold(
          body: Container(
            color: Colors.black, // 可设置测试背景色，方便观察黑线是否消失
            child: const Center(child: Text("横屏测试")),
          ),
        ),
      ),
    );
  }
}

2. 补充系统UI样式设置 #

在main方法中添加SystemChrome.setSystemUIOverlayStyle，将系统UI相关颜色设为透明或与应用背景一致，避免残留边框：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);

  // 添加系统UI样式设置
  await SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  ));

  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.immersive,
    overlays: [],
  );

  runApp(const MyApp());
}

3. 检查并移除带内边距的Widget #

如果页面中使用了SafeArea，它会强制保留系统UI的安全区域边距，直接移除该Widget，或针对性关闭对应方向的边距：

// 移除SafeArea，或修改参数关闭左侧边距
SafeArea(
  left: false,
  child: YourContentWidget(),
)

4. Android平台额外配置（针对Android设备） #

修改android/app/src/main/res/values/styles.xml中的AppTheme配置，确保全屏无额外边框：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

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