Custom Widget QR Scanner / Camera

Hi all!

I am trying to create a custom widget for a QR Scanner using the dependancy: package:mobile_scanner/mobile_scanner.dart

It works perfectly so far, except for the following:

When I get to the page that has the widget for the first time >> it works perfectly

If I navigate to another page and then go back to the page with the custom widget >> the camera doesn't initiate anymore

If I close the app and open again, it restarts and works fine.This is the code that I am using:

I am testing as a PWA. Thanks for your help!

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:mobile_scanner/mobile_scanner.dart';

class ScannerQRCode extends StatefulWidget {
  const ScannerQRCode({
    super.key,
    this.width,
    this.height,
    required this.onScan,
    required this.startScanner,
  });

  final double? width;
  final double? height;
  final Future Function(String scannerQRCode) onScan;
  final bool startScanner;

  @override
  State<ScannerQRCode> createState() => _ScannerQRCodeState();
}

class _ScannerQRCodeState extends State<ScannerQRCode> with WidgetsBindingObserver {
  late MobileScannerController _controller;
  bool _isScannerActive = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _controller = MobileScannerController(
      detectionSpeed: DetectionSpeed.normal,
      facing: CameraFacing.back,
    );
    if (widget.startScanner) {
      _startScanner();
    }
  }

  void _startScanner() {
    if (!_isScannerActive) {
      _controller.start();
      setState(() {
        _isScannerActive = true;
      });
    }
  }

  void _stopScanner() {
    if (_isScannerActive) {
      _controller.stop();
      setState(() {
        _isScannerActive = false;
      });
    }
  }

  @override
  void didUpdateWidget(covariant ScannerQRCode oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.startScanner && !_isScannerActive) {
      _startScanner();
    } else if (!widget.startScanner && _isScannerActive) {
      _stopScanner();
    }
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed && widget.startScanner) {
      _startScanner();
    } else if (state == AppLifecycleState.paused || state == AppLifecycleState.inactive) {
      _stopScanner();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width ?? double.infinity,
      height: widget.height ?? double.infinity,
      child: widget.startScanner
          ? MobileScanner(
              controller: _controller,
              fit: BoxFit.cover,
              onDetect: (capture) async {
                final List<Barcode> barcodes = capture.barcodes;
                if (barcodes.isNotEmpty) {
                  await widget.onScan(barcodes.first.rawValue ?? '');
                }
              },
            )
          : Container(color: Colors.black), // Muestra un fondo negro si la cámara está apagada
    );
  }
}