How to handle device orientation changes

[juliansteenbakker]

Currently rotation is not supported.

We can't check for the right orientation since Flutters own orientation listener doesn't know the difference between landscape left or landscape right. This is why we can only rely on a plugin like native_device_orientation.

Another goal of this package is to use as few dependencies as possible. My question right now is if anyone knows a way we can detect for landscape left or landscape right, without the use of native_device_orientation.

[kjbreil]

After some experimenting I don't think you should be using an external library for this anyway. You need to tell the camera on the device to switch orientation as well so you need to edit the native code already.

I've got a working mock up for iOS right now and will attempt Android shortly (I'm new to Swift and Kotlin). I created a new StreamController for orientation change and within the swift code sent the orientation if it had changed whenever captureOutput runs, at the same time this changes the orientation of the video preview accordingly. Within flutter the width and height of the SizedBox are reversed to get the correct size and an optional function OnChangeOrientation is exposed if the end user wants to do something more on orientation change.

[ptrckdev]

Hello @kjbreil, would it be possible for you to share your working iOS solution? I see that you have forked this repository but haven't pushed any commits.

Thanks in advance!

[Cosmo2357]

@juliansteenbakker
Hi juliansteenbakker! I've been checking about it too. But, other camera-related package developers also seem to have the same issue.
How about MethodChannel or EventChannel? I've never used it though.

[cybrox]

After some experimenting, I do think the only way of testing for langscape left or right without native_device_orientation would be to implement very similar code in this project.

While I do agree with and support the idea of using as little dependencies as possible, I'd personally rather have one more dependency that does on thing and does that thing very well, than having similar lower quality, lower possibility code added to this project directly.

I've also tried using MobileScanner inside a RotatedBox or NativeDeviceOrientationReader but both of them can cause issues on changing orientation as the surface to draw the texture on is briefly removed. I'm sure there would be a way to get it to work but an implementation in this plugin directly would definitely be cleaner.

[nemanja-nisic]

@juliansteenbakker

In my app, the orientation for the entire app is locked to landscape left. Is there a way to force the scanner to be locked in that orientation as well?

[BrechtBD]

Any update on this? I see several examples on the internet to rotate and scale the widget depending the current orientation. But the aspect ratio of the camera controller is used to calculate the scale of the widget in these examples. However I cannot find a similar aspect ratio value for the mobile scanner controller.

`

int turns;
switch (orientation) {
  case NativeDeviceOrientation.landscapeLeft:
    turns = -1;
    break;
  case NativeDeviceOrientation.landscapeRight:
    turns = 1;
    break;
  case NativeDeviceOrientation.portraitDown:
    turns = 2;
    break;
  default:
    turns = 0;
    break;
}

return .... RotatedBox(
        quarterTurns: turns,
        child: Transform.scale(
          scale: 1 / controller.value.aspectRatio,
          child: Container(
            child: Padding(
              padding: const EdgeInsets.all(1.0),
              child: AspectRatio(
                aspectRatio: controller.value.aspectRatio,
                child: Center(
                  child: _cameraPreviewWidget(),
                ),
              ),
            ),`

Like in the above example, how can I detect the controller.value.aspectRatio for the mobile_scanner widget?

[mbalmer]

There is an older and seemingly now unmaintained scanning module on pub.dev that gets orientation and orientation change just right: flutter_barcode_scanner. Even if the last commit is about two years ago, i might still serve as a source of inspiration wrt orientation.

(We used to use use flutter_barcode_scanner, but we now switched to mobile_scanner).

[mbalmer]

flutter_barcode_scanner handles rotation in Java code in CameraSource.java. It has a function setRotation that first queries the rotation by calling windowManager.getDefaultDisplay().getRotation(). See line 884 of CameraSource.java

[ptrckdev]

That project uses native UI elements instead of painting a Flutter Texture correct?

[SebastianBone]

Not really a help for people who really need this, but when I reviewed Google Lens or my Camera App, I noticed that they locked the camera view in portrait mode. Only makes sense, because this will leave the axis in a correct and natural way.
So in my case I tried to solve an issue which was not really valid.

[ryanduffyne]

So this may seem old to the conversation. But how about you let people set the orientation in the initializer for how they want it to display. Then if a user wants to implement their own rotation logic they can and just redraw the window. Then at that point you don't have to add a dependency, and the users can decide what orientations they want to support. You would also get backwards compatibility by leaving the default be what it is today.

[jean-alvess]

Has the problem not been resolved yet? I also need to have it in landscape on the left, and the camera does not rotate. Has anyone managed to do something about this?

[ryanduffyne]

The problem is that the camera is getting initialized to a set orientation. And I think that may be hard coded in. But I haven't had a chance to look.

[jean-alvess]

I really needed to solve this problem, I need to deliver this project on Monday, would there be another package that would do this? with the camera overlay? so I can assemble it the way I want

[ryanduffyne]

What are your targets? iOS, Android....?

[jean-alvess]

yes

[ptrckdev]

I had to upgrade an app from qr_code_scanner to this package as it was impossible to scan small qr codes (1x1cm in size) on the new iPhone 14 Pro. Autofocus didn't work because the focus length is too long on the main shooter and the package doesn't implement automatic switching to the ultra-wide camera. Depending on your needs that package will work fine out of the box but performance may be impacted on small codes in bad lighting. If you need to hit a deadline that might be an option.

[shihabkandil]

As a workaround I wrapped the MobileScanner with a RotatedBox widget as AspectRatio widget didn't work as expected for full width and used the native orientation package to detect the right and left landscape as mentioned in above replies to change the number of QuartedTurns value in RotatedBox widget.