Flutter中实现showModalBottomSheet向下动画消失的问题

看起来你想要实现的流程是：点击「定位当前位置」后，先显示加载指示器，等加载完成（也就是你代码里的3秒延迟），让底部弹窗先带着向下的动画消失，再跳转到LoadingScreen对吧？我来帮你调整代码实现这个逻辑～

你当前的问题在于：没有主动关闭showModalBottomSheet就直接跳转页面了，而且也没等待底部弹窗的关闭动画完成。我们需要调整代码的执行顺序，确保每一步的动画都完成后再执行下一步。

修改后的完整代码 #

Future<dynamic> chooseDeliveryLocation(BuildContext context) {
  return showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (context) {
      Size size = MediaQuery.of(context).size;
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.white,
        ),
        height: size.height * 0.45,
        width: size.width,
        padding: const EdgeInsets.all(10),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                'Choose delivery location',
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const DeliveryLocation(
                icon: Icons.location_on_outlined,
                locationDetails:
                    'MVVM stands for Model-View-ViewModel. The basic idea is to create.',
                locationName: 'Home',
              ),
              locationDetection(
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () async {
                    // 1. 显示加载指示器（假设你的loadingIndicator是showDialog类型，返回弹窗的context）
                    final loadingContext = await loadingIndicator(context);
                    
                    // 2. 模拟加载过程（替换成你实际的定位逻辑）
                    await Future.delayed(const Duration(seconds: 3));
                    
                    // 3. 关闭加载指示器
                    Navigator.pop(loadingContext);
                    
                    // 4. 关闭底部弹窗，await确保向下消失动画完全完成
                    await Navigator.pop(context);
                    
                    // 5. 底部弹窗动画结束后，再跳转到目标页面
                    Get.to(() => const LoadingScreen());
                  },
                  child: Obx(
                    () => DeliveryLocation(
                      icon: Icons.my_location,
                      locationName: 'Deliver to current location',
                      locationDetails: locationController.deliveryLocation2.value,
                      child: SizedBox(
                        height: 20,
                        width: 20,
                        child: isDetectingLocation
                            ? Transform.translate(
                                offset: const Offset(-4, -1),
                                child: circularProgressIndicator(2),
                              )
                            : const SizedBox(),
                      ),
                    ),
                  ),
                ),
              ),
              const DeliveryLocation(
                icon: Icons.pin_drop_outlined,
                locationDetails:
                    'MVVM stands for Model-View-ViewModel. The basic idea is to create.',
                locationName: 'Deliver to different location',
              ),
            ],
          ),
        ),
      );
    });
}

关键调整点说明 #

• 关闭加载指示器：如果你的loadingIndicator是通过showDialog实现的，记得保存它的context，用Navigator.pop关闭，避免加载弹窗一直残留。
• 等待底部弹窗动画：Navigator.pop(context)是异步操作，加上await可以确保底部弹窗的向下消失动画完全结束后，再执行页面跳转，动画衔接会更自然。
• 顺序逻辑：严格按照「显示加载 → 等待加载 → 关闭加载 → 关闭底部弹窗 → 跳转页面」的顺序执行，就能完美实现你想要的效果。

如果你的loadingIndicator是用Overlay或其他方式实现的，只需要调整关闭它的代码即可，核心逻辑保持不变。

备注：内容来源于stack exchange，提问作者Ahmed Loutfy