Flutter二维码扫描插件jsqr的使用

jsqr_flutter 是一个用于 Flutter 的二维码扫描库。它基于 jsqr 库来识别二维码。

注意: 此插件仅适用于 Flutter Web。

使用方法

在 web/index.html 文件中添加以下脚本：

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

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  jsqr: ^0.1.1

扫描二维码

示例代码：

var code = await showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            insetPadding: EdgeInsets.all(5),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0))),
            title: const Text('Scan QR Code'),
            content: Container(
                width: 640,
                height: 480,
                child: Scanner()),
          );
        });

code 变量将包含二维码中的数据。

图像捕获

你也可以通过传递 clickToCapture: true 来捕获图像。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:jsqr/scanner.dart';
import 'dart:html' as html;
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String code;
  Future<bool> camAvailableF;
  html.ImageElement img;

  [@override](/user/override)
  void initState() {
    super.initState();
    camAvailableF = Scanner.cameraAvailable();
  }

  void _openScan() async {
    var code = await showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            insetPadding: EdgeInsets.all(5),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0))),
            title: const Text('Scan QR Code'),
            content: Container(
                width: 640,
                height: 480,
                child: Scanner()),
          );
        });
    print("CODE: $code");
    setState(() {
      this.code = code;
      _counter++;
    });
  }

  void _captureImage() async {
    var dataUrl = await showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            insetPadding: EdgeInsets.all(5),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0))),
            title: const Text('Scan QR Code'),
            content: Container(
                width: 640,
                height: 480,
                child: Scanner(
                  clickToCapture: true,
                )),
          );
        });
    print("IMG URL: $dataUrl");
    html.DivElement vidDiv = html.DivElement();

    ui.platformViewRegistry.registerViewFactory("cap", (int id) => vidDiv);

    img = new html.ImageElement();
    img.src = dataUrl;
    vidDiv.children = [img];

    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FutureBuilder<bool>(
              future: camAvailableF,
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return Text("ERROR: ${snapshot.error}");
                }
                if (snapshot.hasData) {
                  if (snapshot.data) {
                    return Text("Camera is available");
                  }
                  return Text("No camera available");
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '$code',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text("Scan QR Code"),
              onPressed: _openScan,
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text("Capture Image"),
              onPressed: _captureImage,
            ),
            SizedBox(height: 10),
            if (img != null)
              SizedBox(
                  width: 640,
                  height: 480,
                  child: HtmlElementView(viewType: "cap")),
          ],
        ),
      ),
    );
  }
}