如何在Flutter应用暂停时自动关闭modal bottom sheet模态底部弹窗

要实现应用进入后台时自动关闭showModalBottomSheet弹窗，核心是通过监听应用生命周期状态，在触发暂停状态时主动关闭弹窗，具体实现步骤如下：

步骤1：给页面State混入生命周期监听类 #

给承载弹窗的页面State混入WidgetsBindingObserver，用来监听应用的生命周期变化。

步骤2：存储弹窗上下文用于后续关闭操作 #

调用showModalBottomSheet时存储弹窗的上下文，在监听到应用进入后台状态时，通过该上下文执行pop操作关闭弹窗。

步骤3：监听销毁事件避免内存泄漏 #

页面销毁时要移除生命周期监听器，弹窗正常关闭后要清空存储的上下文，避免异常报错和内存泄漏。

完整示例代码 #

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  // 存储当前打开的底部弹窗上下文
  BuildContext? _bottomSheetContext;

  @override
  void initState() {
    super.initState();
    // 注册应用生命周期监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 移除生命周期监听，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  // 应用生命周期状态变化回调
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 监听到应用进入后台暂停状态（用户点Home键、切其他应用等场景）
    if (state == AppLifecycleState.paused) {
      // 如果弹窗处于打开状态，主动关闭
      if (_bottomSheetContext != null && Navigator.canPop(_bottomSheetContext!)) {
        Navigator.pop(_bottomSheetContext!);
        _bottomSheetContext = null;
      }
    }
  }

  // 打开底部弹窗的方法
  void _showCustomBottomSheet() {
    showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext sheetContext) {
        // 存储弹窗的上下文
        _bottomSheetContext = sheetContext;
        return Container(
          height: 200,
          padding: const EdgeInsets.all(16),
          child: const Center(child: Text('模态底部弹窗内容')),
        );
      },
    ).then((_) {
      // 弹窗正常关闭后清空存储的上下文
      _bottomSheetContext = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('底部弹窗自动关闭示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: _showCustomBottomSheet,
          child: const Text('打开底部弹窗'),
        ),
      ),
    );
  }
}

注意事项 #

• 如果业务场景需要同时打开多个底部弹窗，可以用List<BuildContext>存储所有弹窗的上下文，触发暂停时遍历执行pop操作即可
• 示例中增加了Navigator.canPop判断，避免特殊场景下弹窗已经关闭后误调用pop导致的异常

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