想要在容器中打开条形码/二维码扫描仪

Question

我正在使用条形码扫描库，该库在调用时会在整个浏览器窗口中打开扫描仪。但是，我想修改此行为，以便扫描仪在网页上的特定容器中打开，而不是接管整个页面。

本质上，我希望用户的手机摄像头在网页的指定区域内充当产品扫描仪，类似于许多移动购物应用程序中条形码扫描的工作原理。

我怎样才能实现这个目标？我是否应该使用任何特定的 Flutter 库或技术将条形码扫描仪嵌入网页上的容器中？ 图像。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
import 'package:simple_barcode_scanner/simple_barcode_scanner.dart';

class Scanner extends StatefulWidget {
  final double width;
  final double height;
  final int borderRadius;
  final int borderWidth;
  final Color borderColor;

  const Scanner({
    super.key,
    required this.width,
    required this.height,
    required this.borderRadius,
    required this.borderWidth,
    required this.borderColor,
  });

  @override
  _ScannerState createState() => _ScannerState();
}

class _ScannerState extends State {
  String _result = '';

  // late String _barcodeResult;

  @override
  void initState() {
    super.initState();
  }

  Future<void> ScanCode() async {
    String barcodeScanResult;
    try {
      barcodeScanResult = await FlutterBarcodeScanner.scanBarcode(
          "#FF6666", "cancelButtonText", true, ScanMode.BARCODE);
    } on PlatformException {
      barcodeScanResult = 'Hello';
    }
    setState(() {
      _result = barcodeScanResult;
    });
  }

enter image description here  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 400,
          width: MediaQuery.of(context).size.width * 0.95,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.black, width: 3),
          ),
          child: ElevatedButton(
            onPressed: () async {
              var res = await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const SimpleBarcodeScannerPage(),
                  ));
              setState(() {
                if (res is String) {
                  _result = res;
                }
              });
            },
            child: const Text('Open Scanner'),
          ),
        ),
      ],
    );
  }
}

我尝试将扫描仪直接放入容器中（不起作用）。我尝试过使用简单的条码扫描仪、ai 条码扫描仪和 flutter 条码扫描仪

Answer 1

使用 Expanded 而不是 Container，具体方法如下：

Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: [
        Expanded(
          flex: 2, //adjust flex as your requirement
          child: MobileScanner(
            controller: MobileScannerController(
              detectionSpeed: DetectionSpeed.noDuplicates,
            ),
            onDetect: (capture) {
              final List<Barcode> barcodes = capture.barcodes;
              for (final barcode in barcodes) {
                debugPrint('QR found! ${barcode.rawValue}');
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) {
                      return ResultScreen(
                        resultText: barcode.rawValue ?? "",
                      );
                    },
                  ),
                );
              }
              print("QR Code Found!");
            },
          ),
        ),
        Expanded(
          flex: 2, // adjust flex
          child: Column(
            children: [
              //Here you can add you required widgets.
            ],
          ),
        ),
      ],
    ),
  )

这里我使用了mobile_scanner，但你可以使用barcode_scanner、simple_barcode_scanner中的任何一个。如果您还有任何困难，请告诉我。

快乐编码...