Flutter条码扫描插件scan_gun的使用

Flutter条码扫描插件scan_gun的使用

实现扫码枪获取数据源，禁止系统键盘弹窗

实现扫码枪获取数据源，禁止系统键盘弹窗。依赖 EditableText 原理，实现 Flutter 端扫码能力支持。 （不会触发键盘唤起，不会触发中文乱码）

引入

在 pubspec.yaml 文件中进行引用：

dependencies:
  scan_gun: ^2.0.0

使用方式

在 main 方法中初始化 TextInputBinding：

void main() {
  TextInputBinding();
  runApp(const MyApp());
}

提供 ScanMonitorWidget 作为父节点，嵌套使用：

ScanMonitorWidget({
  Key? key,
  required ChildBuilder childBuilder,
  FocusNode? scanNode,
  FocusNode? textFiledNode,
  required void Function(String) onSubmit,
})

参数说明:

• childBuilder:

  typedef ChildBuilder = Widget Function(BuildContext context)
  

  使用者自己 UI 作为子节点。

• scanNode:

  非必传，如果传，可通过 scanNode 监听获取当前扫码可用状态，hasFocus 时为获取焦点。

• GlobalKey:

  非必传，如果传，可通过 ‘scanKey’ 强制获取获取焦点，保证扫码可用，如下：

  scanKey.currentState?.requestKeyboard()
  

• textFiledNode:

  提供外部存在输入框键盘输入与扫码输入同时存在的场景。内部做了焦点切换能力，保证输入框焦点取消后，能马上切换成扫码枪的焦点。

• focusLooper:

  非必传，传 true 可开启轮询保活扫码焦点，但需要保证当前页面堆栈只存在一个 ScanMonitorWidget。

• onSubmit:

  接收扫码枪返回的结果。

适用场景及Demo演示

1. 无输入框交互，获取扫码结果：

[@override](/user/override)
Widget build(BuildContext context) {
  return ScanMonitorWidget(
    childBuilder: (context) {
      return body();
    },
    onSubmit: (String result) {
      print(result); // 接收到扫码结果
    },
  );
}

2. 带输入框交互，获取扫码结果：

FocusNode textFiledNode = FocusNode();
TextEditingController controller = TextEditingController();

Widget body() {
  return TextField(
    focusNode: textFiledNode,
    controller: controller,
  );
}

[@override](/user/override)
Widget build(BuildContext context) {
  return ScanMonitorWidget(
    textFiledNode: textFiledNode,
    childBuilder: (context) {
      return body();
    },
    onSubmit: (String result) {
      print(result); // 接收到扫码结果
    },
  );
}

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:scan_gun/scan_gun.dart';

void main() {
  TextInputBinding();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'scan_gun_demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('扫码枪测试'),
        ),
        body: const TestScanGun(),
      ),
    );
  }
}

class TestScanGun extends StatefulWidget {
  const TestScanGun({Key? key}) : super(key: key);

  [@override](/user/override)
  _TestScanGunState createState() => _TestScanGunState();
}

class _TestScanGunState extends State<TestScanGun> {
  final FocusNode textFiledNode = FocusNode();
  final TextEditingController controller = TextEditingController();

  Widget body() {
    return TextField(
      focusNode: textFiledNode,
      controller: controller,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScanMonitorWidget(
      textFiledNode: textFiledNode,
      childBuilder: (context) {
        return body();
      },
      onSubmit: (String result) {
        print(result); // 接收到扫码结果
      },
    );
  }

  [@override](/user/override)
  void dispose() {
    textFiledNode.dispose();
    controller.dispose();
    super.dispose();
  }
}