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