如何让Flutter bottom sheets、对话框显示在原生底部导航栏上方？

核心原因 #

原生应用的顶部/底部导航栏属于原生视图层级，Flutter的bottom sheets、对话框绘制在自身视图容器内，层级低于原生导航栏，因此会被遮挡。

Android 端处理 #

方法1：通过MethodChannel控制导航栏显隐 #

在Flutter展示弹窗前后，调用原生方法切换导航栏可见性：

1. Flutter 侧代码：

// 初始化MethodChannel
static const MethodChannel _channel = MethodChannel('navigation_bar_controller');

// 显示弹窗前隐藏导航栏
await _channel.invokeMethod('hideNavigationBar');

// 展示bottom sheet
showModalBottomSheet(
  context: context,
  builder: (_) => Container(height: 200, child: const Text('Bottom Sheet')),
).then((_) {
  // 弹窗关闭后恢复导航栏
  _channel.invokeMethod('showNavigationBar');
});

2. Android 原生侧代码（Kotlin）：

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "navigation_bar_controller").setMethodCallHandler { call, result ->
            when (call.method) {
                "hideNavigationBar" -> {
                    // 隐藏底部导航栏（替换为你的导航栏ID）
                    findViewById<BottomNavigationView>(R.id.bottom_nav).visibility = View.GONE
                    // 隐藏顶部ActionBar（若有）
                    supportActionBar?.hide()
                    result.success(null)
                }
                "showNavigationBar" -> {
                    findViewById<BottomNavigationView>(R.id.bottom_nav).visibility = View.VISIBLE
                    supportActionBar?.show()
                    result.success(null)
                }
                else -> result.notImplemented()
            }
        }
    }
}

方法2：调整FlutterView层级至导航栏之上 #

将FlutterView设置为全屏覆盖，同时在Flutter侧手动适配安全区域：
在Activity的onCreate中添加窗口属性：

window.setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)

Flutter侧用SafeArea包裹页面内容，避免状态栏/导航栏遮挡核心内容：

Scaffold(
  body: SafeArea(
    child: YourPageContent(),
  ),
)

iOS 端处理 #

方法1：通过MethodChannel控制TabBar显隐 #

Flutter调用原生方法切换TabBar可见性：

1. Flutter 侧代码（同Android的MethodChannel调用逻辑）：

await _channel.invokeMethod('hideTabBar');
// 展示对话框
showDialog(
  context: context,
  builder: (_) => const AlertDialog(title: Text('Dialog')),
).then((_) => _channel.invokeMethod('showTabBar'));

2. iOS 原生侧代码（Swift）：

class FlutterViewController: FlutterViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let channel = FlutterMethodChannel(name: "navigation_bar_controller", binaryMessenger: self.binaryMessenger)
        channel.setMethodCallHandler { [weak self] call, result in
            guard let self = self else { return }
            switch call.method {
            case "hideTabBar":
                self.tabBarController?.tabBar.isHidden = true
                result.success(nil)
            case "showTabBar":
                self.tabBarController?.tabBar.isHidden = false
                result.success(nil)
            default:
                result.notImplemented()
            }
        }
    }
}

方法2：全屏嵌入Flutter页面 #

将FlutterViewController设置为全屏，Flutter侧通过SafeArea适配状态栏和原TabBar区域，确保弹窗能覆盖整个屏幕。

通用注意事项 #

• 若选择隐藏导航栏的方案，需处理弹窗意外关闭的情况（比如用户点击空白处），确保导航栏能正常恢复。
• 全屏方案下，Flutter页面的底部内边距需匹配原生底部导航栏的高度，避免内容被遮挡。

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