The mobile application usually develops to support both in portrait and landscape mode without any issue. But in some special case, you may need to set the orientation of the application to fix direction to get proper real state space to each component
Set the orientation in flutter
First, you have to import the services package.
import 'package:flutter/services.dart';
Next, you can set orientation by setting the value to setPreferredOrientations method in SystemChrome class. In the Flutter the application entry point is the main method. So you can set orientation before call the runApp method in the main method. But if you need to call a binding before the runApp method, you must call the ensureInitialized method in WidgetsFlutterBinding class
void main() {
WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]).then((_){
runApp(MyApp());
});
}
Set landscape orientation only
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight])
You can set either landscapeLeft or landscapeRight to make it work in one way.
Set portrait orientation only
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown,DeviceOrientation.portraitUp])
If you set both portraitUp and portraitDown as orientation when you tilt your phone upside down it will rotate the app. If you don’t like to work in upside-down orientation, you can just set only the portraitUp.
Change orientation dynamically
This is the same as above, you just need to use the same method when clicking a button or trigger some action.
RaisedButton(
child: Text("Portrait"),
onPressed: (){
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
})
Get device orientation
It quite easy to get current orient in flutter app using MediaQuery
MediaQuery.of(context).orientation
This will return Orientation object and you can check is the portrait or landscape like below
MediaQuery.of(context).orientation == Orientation.landscape
Originally published at mightytechno
Top comments (4)
I have utilized this information for my app.
Thank you my friend and keep helping the comunity.
Cool 😀
There is a list of apps. How to set orientation of a particular app from the list?
i wan to change my layout from landscape to portrait and vice versa inside my app (depending on the rotation of the device by the user)