Flutter编辑条目时触发!_debugLocked断言失败错误，求解决方案

错误原因 #

这个断言失败是因为Slidable组件的动画还未完成时，就触发了Navigator的页面跳转操作。Flutter的Navigator在处理路由时会锁定状态（_debugLocked），如果此时在未解锁的状态下发起新的路由操作，就会触发该错误。

解决方案 #

通过延迟执行路由跳转或利用帧回调，等待Slidable动画完成后再执行Navigator操作，避免状态冲突。

方案1：延迟执行（简单直接） #

修改SlidableAction的onPressed方法，添加短暂延迟等待动画结束：

SlidableAction(
  onPressed: (BuildContext context) {
    // 延迟300ms，适配Slidable默认动画时长
    Future.delayed(const Duration(milliseconds: 300), () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AddVehiclePage(
            edit: true,
            data: vehicle,
          ),
        ),
      ).then((onValue) {
        getvalue();
      });
    });
  },
  backgroundColor: const Color(0xFF21B7CA),
  foregroundColor: Colors.white,
  borderRadius: const BorderRadius.only(
    topRight: Radius.circular(15),
    bottomRight: Radius.circular(15),
  ),
  icon: Icons.edit,
  label: 'Edit'.tr,
),

方案2：帧回调（更稳妥） #

利用Flutter的帧回调机制，确保在当前帧所有动画绘制完成后再执行路由操作：

SlidableAction(
  onPressed: (BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AddVehiclePage(
            edit: true,
            data: vehicle,
          ),
        ),
      ).then((onValue) {
        getvalue();
      });
    });
  },
  backgroundColor: const Color(0xFF21B7CA),
  foregroundColor: Colors.white,
  borderRadius: const BorderRadius.only(
    topRight: Radius.circular(15),
    bottomRight: Radius.circular(15),
  ),
  icon: Icons.edit,
  label: 'Edit'.tr,
),

补充说明 #

如果使用的是flutter_slidable包的最新版本，也可以尝试调整组件的动画参数（如缩短动画时长）来减少冲突概率，但上述两种方案是通用且稳定的解决方式，适配大多数场景。

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