Flutter。 如何在没有 UI 的情况下扫描条形码

Question

How can you scan a 2D barcode using a flutter without the camera's UI? I don't need to see the camera preview. I just want to click on the "Scan" button, and the camera started looking for a barcode, but it did not display what the phone's camera sees in UI.

Answer 1

You could look into using the qr_code_scanner package ( pub link ). Instead of opening in a new view, it uses a custom view for the preview. You can then manipulate the view's dimensions to fit your needs. Note that making it invisible using Visibility or by giving its parent size 0 will disable the camera. Giving it (for example) a height of 1 pixel will still work.

Example code (run with version 0.4.0 of the qr_code_scanner package)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'QR scanner demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String result = '';
  QRViewController controller;
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              // 1 pixel, as a height 0 disables the view
              height: isVisible ? 100 : 1,
              child: QRView(
                key: GlobalKey(),
                onQRViewCreated: _onQRViewCreated,
              ),
            ),
            Text(
              'The barcode value was:',
            ),
            Text(
              '$result',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.visibility),
        onPressed: () {
          setState(() {
            isVisible = !isVisible;
          });
        },
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData.code;
      });
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

I found that one solution is to put the QRView inside a stack, st it is hidden under another view