Flutter: QR code generation and reading

foreword

This csdn is really convincing, there is a QR code in the picture and it directly becomes an illegal picture. As for the effect, run it and see for yourself.

generate

QR code generated in flutter can be used qr_flutter.

Official documentation
https://pub-web.flutter-io.cn/packages/qr_flutter

Install

flutter pub add qr_flutter

example

Example 1

QrImageView(
    data: 'https://pub-web.flutter-io.cn/packages/qr_flutter', // 数据
    version: QrVersions.auto, // 版本选择自适应
    size: 200.0, // 大小
  ),

Example 2

QrImageView(
           data: 'https://pub-web.flutter-io.cn/packages/qr_flutter', // 数据
           version: QrVersions.auto, // 版本选择自适应
           size: 200.0, // 大小
           embeddedImage: const AssetImage('lib/assets/image/flutter.png'), // 图片
           embeddedImageStyle: const QrEmbeddedImageStyle(  // 设置图像样式
             size: Size(40, 40),
           ),
         ),

The official method cannot generate a gap around the picture. But in fact, we can use stacked components to achieve it.

Stack(
	     children: [
	       QrImageView(
	         data: qrData, // 数据
	         version: QrVersions.auto, // 版本选择自适应
	         size: 200.0, // 大小
	       ),
	       Positioned(
	           top: 0,
	           left: 0,
	           right: 0,
	           bottom: 0,
	           child: Center(
	             child: Container(
	               width: 30,
	               height: 30,
	               margin: const EdgeInsets.all(5),
	               padding: const EdgeInsets.all(5),
	               decoration: BoxDecoration(
	                 borderRadius: BorderRadius.circular(5),
	                 color: Colors.white,
	               ),
	               child: Image.asset('lib/assets/abc.png'),
	             ),
	           ))
	     ],
)

Note: Make sure that the amount of information in the QR code is sufficient, that is, the content of the QR code itself is large (not too much), and the picture should not be too large. If too much information of the QR code is lost, the QR code cannot be recognized.

read

It can be used to read QR codes in flutter qr_code_scanner.

Add link description to official website

Install

flutter pub add qr_code_scanner

Problem
When running on a real machine, an error is reported

uses-sdk:minSdkVersion 16 cannot be smaller than version 20 declared in library [:qr_code_scanner]

The reason is: qr_code_scannerthe minimum Android SDK version required by the library is 20. You can open the project's android/app/build.gradlefile, find minSdkVersionand modify it to a value of 20 or higher

Added
re-use library here vibration, which handles vibration. When the scan is successful, it will vibrate again, which is more friendly.

Official document: https://pub-web.flutter-io.cn/packages/vibration

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  // 创建一个全局的key
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  // 结果、控制器
  Barcode? result;
  QRViewController? controller;

  @override
  void reassemble() {
    
    
    super.reassemble();
    if (controller?.pauseCamera != null) {
    
    
      controller!.pauseCamera();
    } else {
    
    
      controller!.resumeCamera();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: QRView(
                key: qrKey,
                onQRViewCreated: _onQRViewCreated,
                // 中间的扫描区域，也可以不要，加上看着更舒服
                overlay: QrScannerOverlayShape(
                    borderColor: Colors.red,
                    borderRadius: 10,
                    borderLength: 30,
                    borderWidth: 10,
                    cutOutSize: 300)),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: (result != null)
                  ? Text(
                      'Barcode Type: ${
      
      describeEnum(result!.format)}   Data: ${
      
      result!.code}')
                  : const Text('Scan a code'),
            ),
          )
        ],
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    
    
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
    
    
      // 默认振动500ms
      Vibration.vibrate();
      setState(() {
    
    
        result = scanData;
      });
    });
  }
}