Flutter条形码读取插件barcode_reader_webassembly的使用

本项目是项目的包装器：Barcode Read - Ts 和 Webassembly。

开始使用

您需要使用两种方法来读取条形码。

方法表

关于ReadBarcodeProps

完整示例代码

import 'dart:async';

import 'package:barcode_reader_webassembly/barcode_reader_webassembly_constants.dart';
import 'package:barcode_reader_webassembly/barcode_reader_webassembly_plugin.dart';
import 'package:flutter/material.dart';
import 'package:universal_html/html.dart';

void main() {
  runApp(const BarcodeReaderWebassemblyExampleApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'BarcodeReaderWebassembly Example',
      home: Scaffold(
        backgroundColor: Color.fromRGBO(22, 27, 34, 1),
        body: Center(
          child: BarcodeReaderWebassemblyExamplePage(
            title: 'BarcodeReaderWebassembly Example Home Page',
          ),
        ),
      ),
    );
  }
}

class BarcodeReaderWebassemblyExamplePage extends StatefulWidget {
  const BarcodeReaderWebassemblyExamplePage({
    Key? key,
    required this.title,
  }) : super(key: key);
  final String title;

  [@override](/user/override)
  State<BarcodeReaderWebassemblyExamplePage> createState() => _BarcodeReaderWebassemblyExamplePageState();
}

class _BarcodeReaderWebassemblyExamplePageState extends State<BarcodeReaderWebassemblyExamplePage> {
  final _barcodeReaderWebassemblyPlugin = BarcodeReaderWebassemblyPlugin();

  bool isProcessing = false;
  String result = '';
  String password = '';

  void _uploadFile(File file) async {
    setState(() {
      isProcessing = true;
    });

    final barcodeProps = ReadBarcodeProps(file);
    barcodeProps.onRequiredPassword = _onRequiredPassword;
    final barcode = await _barcodeReaderWebassemblyPlugin.readBarcodeFromStack(barcodeProps);
    setState(() {
      result = barcode;
      isProcessing = false;
    });
  }

  void _selectFile() {
    InputElement uploadInput = FileUploadInputElement() as InputElement;
    uploadInput.draggable = true;
    uploadInput.multiple = false;
    uploadInput.accept = "image/*','application/pdf";
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      File file = uploadInput.files![0];
      _uploadFile(file);
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  Future<String> _onRequiredPassword() {
    final completer = Completer<String>();
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('请输入pdf密码。'),
          content: TextField(
            obscureText: true,
            decoration: const InputDecoration(
              hintText: '输入密码',
            ),
            onChanged: (value) {
              setState(() {
                password = value;
              });
            },
          ),
          actions: <Widget>[
            ElevatedButton(
              child: const Text('确认'),
              onPressed: () {
                completer.complete(password);
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
    return completer.future;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.blue),
            overlayColor: MaterialStateProperty.all(
              isProcessing ? Colors.black : Colors.transparent,
            ),
            padding: MaterialStateProperty.all(
              const EdgeInsets.all(15),
            ),
          ),
          onPressed: () => _selectFile(),
          child: const Text(
            "选择文件",
            style: TextStyle(fontSize: 15, color: Colors.white),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20),
          child: Text(
            isProcessing ? '正在处理...' : result,
            style: const TextStyle(fontSize: 20, color: Colors.white),
          ),
        )
      ],
    );
  }
}