implementing multi qr code scanning in a stepper, flutter

36 Views Asked by At

I'm building a flutter application and i want to scan 2 qr codes in a stepper widget in 2 steps , I'm using the mobile scanner package. first one is to scan the qr code on the voucher and then display a popup with a progress bar to check if the driver is the authorized to take this order.... and the second is to check the qr code on the vehicle to check if the driver is taking the right vehicle

example of the app : stepper implementation also when i took the screenshot the camera stopped i don't know why xD, anyway this is my widget tree

 Step(
        isActive: _currentStep >= 1,
        state: _currentStep >= 1 ? StepState.complete : StepState.disabled,
        title: Text("Scan Qr code of the Voucher"),
        content: SizedBox(
          height: MediaQuery.of(context).size.height * 0.5,
          child: Column(
            children: [
              Expanded(
                flex: 5,
                child: MobileScanner(
                  // fit: BoxFit.contain,
                  controller: controller,
                  onDetect: (capture) {
                    _onDetectQRDriver(capture);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
      Step(
        isActive: _currentStep >= 2,
        state: _currentStep >= 2 ? StepState.complete : StepState.disabled,
        title: Text("Scan Qr code of the Truck"),
        content: SizedBox(
          height: MediaQuery.of(context).size.height * 0.5,
          child: Column(
            children: [
              Expanded(
                flex: 5,
                child: MobileScanner(
                  controller: controller1,
                  onDetect: (capture) {
                    _onDetectQRTruck(capture);

                  },
                ),
              ),
            ],
          ),
        ),
      ),

this is the _onDetectQRDriver function :

  Future<void> _onDetectQRDriver(BarcodeCapture capture) async {
    print("------------------------on Driver Detect");
    // await controller.stop();
    print("------------------------on Driver Detect after await");
    final List<Barcode> barcodes = capture.barcodes;
    final Uint8List? image = capture.image;
    for (final barcode in barcodes) {
      debugPrint('Barcode found! ${barcode.rawValue}');
    }
    print("-------------------------------Driver");
    _showDriverCheckingDialog();
    Future.delayed(const Duration(seconds: 5), () {
      Navigator.pop(context);
      _advanceStep();
    });
  }

this is how I'm initializing the controller :

  MobileScannerController controller = MobileScannerController(
      facing: CameraFacing.back,
      detectionSpeed: DetectionSpeed.noDuplicates,
      torchEnabled: false,
      autoStart: false,
  );

the problem is that when scanning in the first step the on detect function is being called in both widgets so I'm firing 2 functions when the first qr code is scanned . I've tried to implement 2 controller for each qr scanner widget but didn't work, can someone please help and guide me on how to implement such flow (1-Scan first qr -> do some verification then proceed to next step (next qr code) and also do some verification....) regards

0

There are 0 best solutions below