Want to open Bar code/ QR code scanner in a container

Question

I'm using a barcode scanning library that opens the scanner in the entire browser window when invoked. However, I'd like to modify this behavior so that the scanner opens within a specific container on the webpage instead of taking over the entire page.

Essentially, I want the user's phone camera to function as a product scanner within a designated area of the webpage, similar to how barcode scanning works in many mobile shopping apps.

How can I achieve this? Are there any specific Flutter libraries or techniques I should be using to embed the barcode scanner within a container on my webpage? image.

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'),
          ),
        ),
      ],
    );
  }
}

I tried putting the scanner directly in the container(didn't work). I tried using simple barcode scanner, ai barcode scanner and flutter barcode scanner

Answer 1

Use Expanded instead of Container, Here's how you can do it:

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.
            ],
          ),
        ),
      ],
    ),
  )

Here I used mobile_scanner but you can use barcode_scanner, simple_barcode_scanner any of these. Let me know if you still have any difficulty.

Happy Coding...