Restrict Landscape mode in Flutter

In this article, we’ll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation, if we flip to landscape orientation, UI might not be adjusted for that. So, there are two cases, first is, your app can be adjusted for landscape orientation and second is that your app might not require landscape orientation. So, in the second case, we can restrict the landscape orientation. This can be done by using the default SystemChrome class. This class has a method setPreferredOrientations, which takes a list of device orientations that need to be implemented in the app. 

Available Orientations:

  • landscapeLeft
  • landscapeRight
  • portraitDown
  • portraitUp
Syntax: SystemChrome.setPreferredOrientations([DeviceOrientation.yourChoice])

Here, SystemChrome is the default class that controls many device features. This class has method setPreferredOrientations which takes a list of type DeviceOrientation and preferred orientations can be passed to it as a list.

Example:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; //For using SystemChrome
  
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp]);
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('This app can\'t be rotated to Landscape mode',
              style: TextStyle(color: Colors.green, 
                fontSize: 17),
          ),
        ),
      ),
    );
  }
}

chevron_right


Output:

lanscape mode in flutter

The output app as shown above would be restricted to only portrait mode. Even if you rotate the device, it would not change to landscape mode. 

Points to remember:

  • Don’t forget to include import ‘package:flutter/services.dart’;  as SystemChrome is defined in services.dart file.
  • Also add WidgetsFlutterBinding.ensureInitialized(); before using SystemChrome class. If you don’t add this line of code, then the orientation restriction might not work on some devices. In newer versions of Flutter, it is required to add this method.
  • If your target device is an iPad, then the above code would only work, if multitasking is disabled.
  • In order to solve this problem, you can opt-out of multitasking on iPad, then the above code would work, but your app wouldn’t support Slide Over and Split View multitasking.
  • If you decide to opt-out of multitasking, you can do this by changing the setting “Requires full screen” to true in the Xcode Deployment Info.
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.