如何确认showMaterialModalBottomSheet底部弹窗已完全消失？

当使用await showMaterialModalBottomSheet()时，Future会在弹窗开始关闭动画的第一帧就完成，无法直接拿到弹窗完全消失的通知。可以通过以下两种方式解决：

方法一：监听弹窗路由的Dispose事件 #

在弹窗的builder中获取当前的ModalBottomSheetRoute，监听其dispose()方法，当路由被销毁时，就代表弹窗已完全消失：

await showMaterialModalBottomSheet(
  context: context,
  builder: (context) {
    // 获取当前弹窗对应的路由
    final sheetRoute = ModalRoute.of(context) as ModalBottomSheetRoute;
    // 监听路由销毁事件
    sheetRoute.dispose().then((_) {
      // 弹窗已完全消失，执行后续逻辑
      print("底部弹窗已完全关闭");
    });
    return Container(
      height: 250,
      color: Colors.white,
      child: const Center(child: Text("测试弹窗")),
    );
  },
);

方法二：使用自定义NavigatorObserver追踪路由 #

创建一个自定义的NavigatorObserver，在路由被弹出（didPop）时判断是否为底部弹窗路由，以此触发完全关闭的回调：

1. 定义Observer类 #

class BottomSheetCloseObserver extends NavigatorObserver {
  final VoidCallback? onBottomSheetFullyClosed;

  BottomSheetCloseObserver({this.onBottomSheetFullyClosed});

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    // 判断弹出的路由是否为底部弹窗路由
    if (route is ModalBottomSheetRoute) {
      onBottomSheetFullyClosed?.call();
    }
  }
}

2. 注册Observer到MaterialApp #

MaterialApp(
  navigatorObservers: [
    BottomSheetCloseObserver(
      onBottomSheetFullyClosed: () {
        // 弹窗完全消失后的逻辑
        print("底部弹窗已完全关闭");
      },
    ),
  ],
  // 其他配置
)

方法一更适合单次弹窗的场景，方法二则适合全局需要监听所有底部弹窗关闭的场景。

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