Flutter插件回调中页面导航异常问题求助

这个问题我之前也碰到过，核心原因是插件回调的执行环境可能脱离了Flutter的导航上下文，或者你使用的BuildContext不属于当前的导航栈，导致新页面没有正常跳转而是被嵌入当前页面。下面给你两个靠谱的解决方案：

方案一：使用全局导航Key（推荐） #

通过全局的NavigatorState Key来管理导航，不需要依赖特定的BuildContext，在插件回调里使用更稳定。

修改步骤： #

1. 定义全局导航Key
2. 给MaterialApp绑定这个Key
3. 在插件回调中通过Key触发导航

完整代码示例：

import 'dart:async';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// 定义全局导航Key
final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

void main() {
  runApp(MaterialApp(
    navigatorKey: _navigatorKey, // 绑定导航Key
    home: const MyApp(),
  ));
}

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<void> _scanBarcode() async {
    try {
      String barcode = await BarcodeScanner.scan();
      // 确保在UI线程执行导航操作
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _navigatorKey.currentState?.push(
          MaterialPageRoute(
            builder: (context) => ResultPage(barcode: barcode),
          ),
        );
      });
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        // 处理相机权限被拒的情况
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('相机权限被拒绝')),
        );
      } else {
        // 处理其他错误
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('扫描错误: ${e.message}')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('扫码测试')),
      body: Center(
        child: ElevatedButton(
          onPressed: _scanBarcode,
          child: const Text('开始扫码'),
        ),
      ),
    );
  }
}

// 示例跳转页面
class ResultPage extends StatelessWidget {
  final String barcode;

  const ResultPage({super.key, required this.barcode});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('扫码结果')),
      body: Center(child: Text('扫描到的内容: $barcode')),
    );
  }
}

方案二：确保使用有效的BuildContext #

如果你不想用全局Key，要确保在回调中使用的context是当前页面的有效上下文，并且确保导航操作在UI线程执行：

修改要点： #

• 不要在插件的原生回调（比如平台通道的回调）中直接使用可能已失效的context
• 使用WidgetsBinding.instance.addPostFrameCallback将导航操作切换到UI线程执行

示例代码片段：

Future<void> _scanBarcode() async {
  try {
    String barcode = await BarcodeScanner.scan();
    // 回到UI线程，使用当前页面的context导航
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => ResultPage(barcode: barcode)),
      );
    });
  } on PlatformException catch (e) {
    // 错误处理逻辑
  }
}

为什么会出现这个问题？ #

插件的回调（比如扫码完成的回调）可能是在非UI线程执行的，或者当回调触发时，原来的context对应的Widget已经被销毁/移出导航栈，导致导航操作没有正确触发全局的页面跳转，而是在当前Widget的层级内嵌入了新页面。

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