Flutter中如何修改iOS端底部安全区（Home指示条区域）颜色？

不需要复杂的原生侵入，优先用Flutter层的内置能力就能实现和Android端一致的效果，下面分两种方案提供，优先选第一种。

方案一：纯Flutter实现（90%场景适用，推荐） #

核心逻辑是让Scaffold背景铺满整个屏幕（包括底部安全区），再用SafeArea自动给页面内容加安全区内边距避免被Home指示条遮挡，不需要改任何iOS原生代码。

• 先在入口初始化全局系统UI样式，和你Android端的SystemUiOverlayStyle配置统一：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    // 保留你原来Android端的导航栏配置即可
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.dark,
    // iOS端状态栏配置，根据你的主题明暗调整
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark,
  ));
  runApp(const MyApp());
}

• 页面Scaffold做两个关键配置：

Scaffold(
  // 核心开关：打开后Scaffold的背景会自动延伸到顶部、底部的系统安全区
  extendBody: true,
  // 这里设置你应用的全局/页面背景色，底部安全区会直接显示该颜色
  backgroundColor: const Color(0xFFF5F5F5),
  // 用SafeArea包裹实际业务内容，自动计算安全区padding，避免内容被刘海、Home指示条挡住
  body: SafeArea(
    child: const YourPageContent(),
  ),
  // 如果有底部导航栏、底部固定按钮，同样用SafeArea包裹对应组件即可
  // bottomNavigationBar: SafeArea(child: YourBottomNavBar()),
)

注意点：如果页面用了BottomSheet、PersistentFooterButton这类固定在底部的组件，记得给组件加上对应底部安全区padding，避免内容压在Home指示条上。

方案二：iOS原生配置兜底（混合开发/特殊全屏场景用） #

如果是Flutter和原生混合开发、或者全屏启动页这类纯Flutter配置覆盖不到的场景，可以改iOS端原生配置补全效果：
打开项目下ios/Runner/AppDelegate.swift文件，在启动回调里给Flutter根控制器加配置：

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    // 配置Flutter根视图背景，避免冷启动时安全区显示默认黑/白色
    if let flutterVC = window?.rootViewController as? FlutterViewController {
      // 色值和你Flutter端的应用背景色保持一致
      flutterVC.view.backgroundColor = UIColor(red: 245/255, green: 245/255, blue: 245/255, alpha: 1)
      flutterVC.extendedLayoutIncludesOpaqueBars = true
    }
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

如果要解决冷启动瞬间的色差，还可以直接修改ios/Runner/Base.lproj/LaunchScreen.storyboard里根视图的背景色，和首屏背景色保持一致即可。

最佳实践 #

• 优先用纯Flutter方案，后续迭代主题色只需要改Flutter层代码，不需要双端同步维护
• 如果用了第三方路由、沉浸式状态管理库，注意检查是否有覆盖全局SystemUiOverlayStyle的逻辑，避免配置失效
• 不要手动写死底部安全区高度，不同iOS机型的Home指示条高度不一样，直接用Flutter内置的SafeArea自动计算即可

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