Customize Rotation Behavior For Specific Widgets In Flutter

user_14033701 0
Viewed 112

In my Flutter Application, I am using a OrientationBuilder widget to change my layout based on the current orientation.

But the animation occuring when the widgets change position doesn't look smooth, and the scaling on UI elements temporarely becomes weird.

Is there a way to implement an orientation change, such that the elements just stay in their positions, and rotate themselves?

Current behavior:

Current Behavior

Preferred Behavior:

Preferred Behavior

I have left out the camera screen in the flutter App, as this is only about the onscreen controlls. The camera view itself isn't the issue!

flutter-layout dart flutter
1 Answers

I've been having the same issue, the camera preview rotation works weird. What I ended up doing is using this package native orientation which provides the following API: Stream<NativeDeviceOrientation> onOrientationChanged(useSensor: false) which will trigger orientation changes even if you lock the screen using: SystemChrome.setPreferredOrientations()

Basically in the init of your component: _orientation = NativeDeviceOrientationCommunicator() .onOrientationChanged(useSensor: true) .listen((event) { switch (event) { case NativeDeviceOrientation.portraitUp: case NativeDeviceOrientation.unknown: _actualOrientation = DeviceOrientation.portraitUp; break; case NativeDeviceOrientation.portraitDown: _actualOrientation = DeviceOrientation.portraitDown; break; case NativeDeviceOrientation.landscapeLeft: _actualOrientation = DeviceOrientation.landscapeLeft; break; case NativeDeviceOrientation.landscapeRight: _actualOrientation = DeviceOrientation.landscapeRight; break; } }); and then use the actual orientation to animate the icons or know the actual orientation of the captured image.

Remember to close the subscription on dispose _orientation.cancel();

user_12430330
Related