juliansteenbakker / mobile_scanner

A universal scanner for Flutter based on MLKit. Uses CameraX on Android and AVFoundation on iOS.
BSD 3-Clause "New" or "Revised" License
911 stars 522 forks source link

scanWindow not the width and height specified #1199

Open ArkaSoftwareDk opened 2 months ago

ArkaSoftwareDk commented 2 months ago

flutter pub deps : |-- mobile_scanner 5.2.3 | |-- flutter_web_plugins 0.0.0 | | |-- characters... | | |-- collection... | | |-- flutter... | | |-- material_color_utilities... | | |-- meta... | | '-- vector_math... | |-- plugin_platform_interface 2.1.8 | | '-- meta... | |-- web 0.5.1 | '-- flutter...

flutter doctor:

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.19045.4651], locale da-DK) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [√] Chrome - develop for the web [√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1) [√] Android Studio (version 2024.1) [√] VS Code (version 1.93.1) [√] Network resources

code based on the controller example: https://github.com/juliansteenbakker/mobile_scanner/blob/master/example/lib/barcode_scanner_controller.dart

with a build function like this:

@override
Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;
    final scannerwidth = width * 0.5;
    final scannerheight = height * 0.2;

    return Scaffold(
        appBar: AppBar(title: const Text("Scanner")),
        backgroundColor: Colors.black,
        body: Stack(children: [
          LayoutBuilder(builder: (BuildContext b, BoxConstraints c) {
            return MobileScanner(
              scanWindow: Rect.fromCenter(
                  center: c.biggest.center(Offset.zero),
                  width: scannerwidth,
                  height: scannerheight),
              overlayBuilder: (context, constraints) {
                return Positioned.fromRect(
                    rect: Rect.fromCenter(
                        center: constraints.biggest.center(Offset.zero),
                        width: scannerwidth,
                        height: scannerheight),
                    child: Container(
                        width: scannerwidth,
                        height: scannerheight,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.blue, width: 4),
                          color: Colors.transparent,
                        )));
              },
            );
          })
        ]));
  }

The blue area is whats show from the overlaybuilder. and the orange area is an approximation of the area where the scanWindow seems to be, as it only finds QR codes in this area of the screen. scr

I have also tried with boxconstraints rather than mediaquery with the same results:

scanWindow: Rect.fromCenter(
                    center: c.biggest.center(Offset.zero),
                    width: c.maxWidth * 0.5,
                    height: c.maxHeight * 0.2),
overlayBuilder: (context, constraints) {
                  return Positioned.fromRect(
                      rect: Rect.fromCenter(
                          center: constraints.biggest.center(Offset.zero),
                          width: constraints.maxWidth * 0.5,
                          height: constraints.maxHeight * 0.2),
                      child: Container(
                          width: constraints.maxWidth * 0.5,
                          height: constraints.maxHeight * 0.2,
                          decoration: BoxDecoration(
                            border: Border.all(color: Colors.blue, width: 4),
                            color: Colors.transparent,
                          )));
                },
navaronbracke commented 2 months ago

I think that the scan window is currently always a square. I could be wrong, though.