Flutter网页二维码扫描插件flutter_web_qrcode_scanner的使用

📷 flutter_web_qrcode_scanner

这是一个专为Flutter Web设计的插件，用于扫描二维码。

🛠️ Getting Started

首先需要在你的pubspec.yaml文件中添加此插件flutter_web_qrcode_scanner:1.1.1：

dependencies:
  flutter_web_qrcode_scanner:1.1.1

然后你需要在index.html文件的body标签后添加如下脚本：

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

🏃 Usage

自动播放示例

视频预览（扫描区域）将自动启动。

FlutterWebQrcodeScanner(
    cameraDirection: CameraDirection.back,
    stopOnFirstResult: true, // 如果你不想在获取第一个结果后停止视频预览，则设置为false
    onGetResult: (result) {
           // _result = jsonDecode(result);
    },
    width:200,
    height:200,
)

你可以通过cameraDirection属性选择扫描相机，可以是CameraDirection.back或CameraDirection.front。

如果你想要控制相机扫描的开始和停止，必须使用CameraController属性：

CameraController _controller = CameraController(autoPlay: false);

然后你可以通过调用方法startVideoStream()和stopVideoStream()来开始和停止视频预览：

InkWell(
  onTap:(){
    _controller.startVideoStream();
  },
)

...

FlutterWebQrcodeScanner(
  controller: _controller,
  onGetResult: (result) {
            // some code
         _controller.stopVideoStream();
      },
)

示例代码

以下是完整的示例代码，展示了如何在一个简单的Flutter应用中使用这个插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Plugin Example",
      home: Scaffold(
        body: AutoScanExample(),
      ),
    );
  }
}

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

  @override
  State<AutoScanExample> createState() => _AutoScanExampleState();
}

class _AutoScanExampleState extends State<AutoScanExample> {
  String? _data;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        _data == null
            ? Container()
            : Center(
                child: Text(
                  _data!,
                  style: const TextStyle(fontSize: 18, color: Colors.green),
                  textAlign: TextAlign.center,
                ),
              ),
        FlutterWebQrcodeScanner(
          cameraDirection: CameraDirection.back,
          onGetResult: (result) {
            setState(() {
              _data = result;
            });
          },
          stopOnFirstResult: true,
          width: MediaQuery.of(context).size.width * 0.8,
          height: MediaQuery.of(context).size.height * 0.8,
          onError: (error) {
            // print(error.message)
          },
          onPermissionDeniedError: () {
            // 显示警告对话框或其他提示信息
          },
        ),
      ],
    );
  }
}

这段代码创建了一个简单的Flutter应用程序，其中包含一个二维码扫描器。当扫描到二维码时，它会显示扫描到的数据，并且在获取到第一个结果后停止扫描。