Examples

This section demonstrates how to use the qrcode_barcode_scanner plugin in your Flutter app. Below are some examples showcasing the key functionalities of the library.

Basic QR & Barcode Scanning

This is a basic example of how to set up the scanner and handle the scanned data.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('QR & Barcode Scanner Example'),
        ),
        body: const ScannerDemo(),
      ),
    );
  }
}

class ScannerDemo extends StatefulWidget {
  const ScannerDemo({super.key});

  @override
  State<ScannerDemo> createState() => _ScannerDemoState();
}

class _ScannerDemoState extends State<ScannerDemo> {
  String? _scannedValue;
  late QrcodeBarcodeScanner _scanner;

  @override
  void initState() {
    super.initState();
    // Initialize the scanner and set the callback for handling scanned values
    _scanner = QrcodeBarcodeScanner(
      onScannedCallback: (String value) {
        setState(() {
          _scannedValue = value;
        });
      },
    );
  }

  @override
  void dispose() {
    // Dispose the scanner when the widget is removed from the tree
    _scanner.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  "Scanned value: ${_scannedValue ?? 'none'}",
                  style: const TextStyle(fontSize: 24),
                ),
                const SizedBox(height: 20),
                // Add a text field to demonstrate focusing (which disables the scanner)
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.0),
                  child: TextField(
                    decoration: InputDecoration(
                        labelText: 'Focus here to disable scanner'),
                    keyboardType: TextInputType.text,
                  ),
                ),
              ],
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 20.0),
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                _scannedValue = null; // Clear the scanned value
              });
            },
            child: const Text("Clear scanned value"),
          ),
        )
      ],
    );
  }
}

Handling Scanned Values

In this example, the plugin listens for scanned values and processes them.

QrcodeBarcodeScanner(
  onScannedCallback: (String scannedCode) {
    print("Scanned: $scannedCode");
  },
);

This callback will be triggered whenever a new value is scanned.

Managing Focus to Avoid Conflicts

The plugin automatically disables scanning when a TextField or TextFormField is focused. Here’s how to demonstrate this feature:

const Padding(
  padding: EdgeInsets.symmetric(horizontal: 20.0),
  child: TextField(
    decoration: InputDecoration(labelText: 'Focus here to disable scanner'),
    keyboardType: TextInputType.text,
  ),
);

When the text input field is focused, the scanner will not process key events, preventing conflicts with user inputs.

Conclusion

These examples show how easy it is to integrate the qrcode_barcode_scanner plugin into your Flutter application for QR and barcode scanning using virtual keyboards.