Flutter使用flutter_barcode_scanner扫码后如何将数据传递到新页面

你只需在获取到扫描结果后，调用路由跳转时携带参数即可实现需求，以下是两种常用实现方案，可根据你的路由使用习惯二选一：

方案1：直接使用MaterialPageRoute跳转传值 #

步骤1：修改扫码函数，拿到有效结果后直接跳转 #

Future<void> scanBarcodeNormal() async {
  String barcodeScanRes;
  try {
    barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
        '#ff6666', 'Cancel', true, ScanMode.BARCODE);
    print(barcodeScanRes);
  } on PlatformException {
    barcodeScanRes = 'Failed to get platform version.';
  }
  if (!mounted) return;
  
  // 过滤用户点击取消的无效结果（插件取消扫码默认返回字符串-1）
  if(barcodeScanRes != "-1"){
    // 跳转时直接把扫描结果传入目标页面构造函数
    Navigator.push(
      context, 
      MaterialPageRoute(builder: (context)=> BarcodeResultPage(barcode: barcodeScanRes))
    );
  }

  setState(() {
    _scanBarcode = barcodeScanRes;
  });
}

步骤2：编写目标页面接收参数 #

// 扫码结果页代码示例
class BarcodeResultPage extends StatelessWidget {
  // 定义变量接收传递过来的条码数据
  final String barcode;
  const BarcodeResultPage({Key? key, required this.barcode}) : super(key: key);

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

方案2：使用命名路由传值（适配你现有代码中pushNamed的路由写法） #

步骤1：修改扫码函数，跳转时携带arguments参数 #

Future<void> scanBarcodeNormal() async {
  String barcodeScanRes;
  try {
    barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
        '#ff6666', 'Cancel', true, ScanMode.BARCODE);
    print(barcodeScanRes);
  } on PlatformException {
    barcodeScanRes = 'Failed to get platform version.';
  }
  if (!mounted) return;
  
  if(barcodeScanRes != "-1"){
    // 命名路由跳转时通过arguments携带参数
    Navigator.pushNamed(context, '/barcodeResult', arguments: barcodeScanRes);
  }

  setState(() {
    _scanBarcode = barcodeScanRes;
  });
}

步骤2：注册路由并在目标页接收参数 #

首先在你的MaterialApp配置中注册对应路由：

MaterialApp(
  // 你的其他配置
  routes: {
    // 你的其他已注册路由
    '/barcodeResult': (context) => const BarcodeResultPage(),
  },
)

目标页参数接收代码：

class BarcodeResultPage extends StatelessWidget {
  const BarcodeResultPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 从路由设置中取出传递的条码参数
    final String? barcode = ModalRoute.of(context)?.settings.arguments as String?;
    return Scaffold(
      appBar: AppBar(title: const Text("扫码结果")),
      body: Center(child: Text("扫描得到的条码：${barcode ?? "无有效数据"}")),
    );
  }
}

补充说明 #

如果需要在多个页面共享扫描结果，可以选用Provider、GetX等状态管理方案存储数据，以上两种方案为单页面传递场景的最简实现。

内容的提问来源于stack exchange，提问作者Jian Yuan Ng