Flutter中从含mobile_scanner的页面跳转后，新页面扫描器失效问题

核心原因 #

Screen A的MobileScannerController没有在页面销毁时释放相机资源，导致Screen B无法获取相机硬件权限/资源，最终出现扫描视口空白、功能失效的情况。

修复方案 #

1. 给Screen A添加控制器生命周期管理 #

在State类中重写dispose方法，确保页面销毁时释放相机资源：

// Screen A (Stateful Widget)
late final MobileScannerController controller = MobileScannerController();

@override
void dispose() {
  controller.dispose(); // 关键操作：释放相机资源
  super.dispose();
}

Widget build(BuildContext context) {
  return Column(
    children: [
      MobileScanner(
        controller: controller,
      ),
      FilledButton(
        onTap: () => Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(builder: (_) => ScreenB()),
          (route) => false, // 根据业务需求调整路由规则
        ),
      ),
    ],
  );
}

2. 给Screen B添加同样的资源释放逻辑 #

避免后续从Screen B跳转其他页面时出现相同问题：

// Screen B (Stateful Widget)
late final MobileScannerController controller = MobileScannerController();

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

Widget build(BuildContext context) {
  return MobileScanner(
    controller: controller,
  );
}

可选优化：跳转时临时暂停/恢复扫描 #

如果不需要销毁Screen A，只是临时跳转，可以在跳转前暂停扫描，返回后恢复：

// Screen A中按钮点击事件修改
FilledButton(
  onTap: () async {
    await controller.stop(); // 跳转前暂停扫描
    await Navigator.of(context).push(MaterialPageRoute(builder: (_) => ScreenB()));
    await controller.start(); // 返回后恢复扫描
  },
)

原理说明 #

mobile_scanner的控制器持有相机硬件的独占引用，若不主动调用dispose()释放，相机资源会被持续占用，新页面的控制器无法正常初始化相机，进而出现空白、无法扫描的异常。通过在页面生命周期结束时释放资源，能确保相机硬件被正确回收，供后续页面使用。

内容的提问来源于stack exchange，提问作者Shreyash.K