Flutter: how to prevent device orientation changes and force portrait?
FlutterDartOrientationPortraitFlutter Problem Overview
I would like to prevent my application from changing its orientation and force the layout to stick to "portrait".
In the main.dart, I put:
void main(){
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown
]);
runApp(new MyApp());
}
but when I use the Android Simulator rotate buttons, the layout "follows" the new device orientation...
How could I solve this?
Thanks
Flutter Solutions
Solution 1 - Flutter
Import package:flutter/services.dart
, then
Put the SystemChrome.setPreferredOrientations
inside the Widget build()
method.
Example:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return new MaterialApp(...);
}
}
Update
This solution mightn't work for some IOS devices as mentioned in the updated flutter documentation on Oct 2019.
They Advise to fixed the orientation by setting UISupportedInterfaceOrientations in Info.plist like this
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
For more information https://github.com/flutter/flutter/issues/27235#issuecomment-508995063
Solution 2 - Flutter
@boeledi, If you want to “lock” the device orientation and not allow it to change as the user rotates their phone, this was easily set as below,
// This did not work as requirement
void main() {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
runApp(new MyApp());
}
> You have to wait until setPreferredOrientations
is done and then
> start the app
// This will works always for lock screen Orientation.
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
.then((_) {
runApp(new MyApp());
});
}
Solution 3 - Flutter
iOS:
Calling SystemChrome.setPreferredOrientations()
doesn't work for me, and I had to change the Device Orientation
in the Xcode project as following:
Android:
Set the screenOrientation
attribute to portrait
for the main activity in the file android/app/src/main/AndroidManifest.xml
as following:
Solution 4 - Flutter
Put the WidgetsFlutterBinding.ensureInitialized()
else you will get an error while building.
import 'package:flutter/services.dart';
void main() async => {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp],
); // To turn off landscape mode
runApp(MainApp());
};
Solution 5 - Flutter
Open android/app/src/main/AndroidManifest.xml and add the following line in the MainActivity:
android:screenOrientation="portrait"
If you have this:
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
You should end up with something like this:
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustResize">
This works for Android. On iOS, you will have to change this from the Xcode page: https://i.stack.imgur.com/hswoe.png (as Hejazi said)
Solution 6 - Flutter
The 'setPreferredOrientations' method returns a Future object. Per documentation a Future represents some value that will be available somewhere in future. That's why you shall wait until it's available and then move on with the application. Hence, there shall be used 'then' method, which, per definition, "registers callbacks to be called when the Future completes". Hence, you shall use this code:
void main() {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]).then((_) {
runApp(new App());
});
}
Also, the following file must be imported:
'package:flutter/services.dart'
Solution 7 - Flutter
First of all import this in main.dart file
import 'package:flutter/services.dart';
Then don't copy paste rather see(remember) and write below code in main.dart file
To force in portrait mode:
void main() {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp,DeviceOrientation.portraitDown])
.then((_) => runApp(MyApp()),
);
To force in landscape mode:
void main() {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight])
.then((_) => runApp(MyApp()),
);
Solution 8 - Flutter
For people, that they are reading this question now. The easiest way that I found and it worked on both android & ios devices.
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations(
[
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
],
).then((val) {
runApp(YourAppName());
});
}
Solution 9 - Flutter
Import import 'package:flutter/services.dart';
Then you include the line of code below in your main.dart
file, and in your main method like so:
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp,
]);
runApp(myApp());
Solution 10 - Flutter
Just add the following line of code in the main.dart file.
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
and remember to import services.dart file. An example is given below!
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
return MaterialApp(
home: Scaffold(
body: Center(child: Text("A Flutter Example!")),
),
);
}
}
Solution 11 - Flutter
> You have two options for for android
1. Write for on main
main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
.then((_) {
runApp(
child: MyApp(),
);
});
}
2. Set from natively on AndroidManifest.xml
file
> You have also two option for iOS
1. from info.plist
add this line to your info.plist
file
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
2. from Runner
open your Runner.xcworkspace
from iOS folder on your Xcode. Click on Runner not Pods. You can find this option on General>Deployment Info. just check what you want
Solution 12 - Flutter
setPreferredOrientation
returns a Future<void>
, so it is asynchronous. The most readable approach is to define main
as asynchronous:
Future<void> main() async {
await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
return runApp(new MyApp());
}
Solution 13 - Flutter
Below is the official example of the flutter team. https://github.com/flutter/samples/blob/master/veggieseasons/lib/main.dart
import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome;
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(HomeScreen());
}
Solution 14 - Flutter
It's possible to enable the requires fullscreen
option in iOS case.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]).then((_) {
runApp(MediaQuery(
data: MediaQueryData(),
child:
MaterialApp(debugShowCheckedModeBanner: false, home: LoginPage())));
});
}
Solution 15 - Flutter
As of new flutter versions along with setting the preferred Orientation
we need to add one extra line i.e
WidgetsFlutterBinding.ensureInitialized();
So working code for this is -
import 'package:flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown
]);
runApp(MyApp());
}
Solution 16 - Flutter
This solution has worked for me on two different projects for Android. Can't guarantee it will work for iOS too. I've read all the previous answers and I think the best and simplest solution is to do it like this:
Android:
This way you avoid all the "await"s, "async"s and "then"s that might mess around with your code
/// this is in main.dart
main(){
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(
initialRoute: '/root',
routes: {
'/root': (context) => MyApp(),
},
title: "Your App Title",
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
/// ENFORCE DEVICE ORIENTATION PORTRAIT ONLY
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown
]);
/// RUN THE APP
return MaterialApp(
home: HomeScreen(),
);
}
}
iOS:
I think this answer's update is your best bet for iOS.
!! DISCLAIMER !! I did a little bit of research and apparently, the documentation here specifically says:
setPreferredOrientations method Limitations:
"This setting will only be respected on iPad if multitasking is disabled."
Here is how you can disable multitasking (AKA turn on "Requires Full Screen" option) from XCode
Another possible fix for iOS
You might also try this one out. I haven't tried it personally, since I don't have an iPad or XCode on my PC, but it's worth a shot
Solution 17 - Flutter
Try
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
runApp(MyApp());
}
You can also change the screen orientation settings in the android manifest and ios info.plist file.
Solution 18 - Flutter
If you are editing this from the xcode interface, it will not be changed for ipad. For the ipad section, you must edit the info.plist file from the android studio. You can see in the array list like that "~ ipad". There are two sections available in info.plist, you have to manually edit it for both iphone and ipad.
Solution 19 - Flutter
To make SystemChrome.setPreferredOrientations
to work on iPad, enable "Requires full screen" in Xcode project editor or simply add the following lines in /ios/Runner/Info.plist in your project folder.
<key>UIRequiresFullScreen</key>
<true/>
Solution 20 - Flutter
This is simple way ->
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);