Flutter - Setting Orientation to Landscape or Portrait

By default, the orientation of a Flutter application follows the device orientation, assuming the user doesn't turn off auto rotation setting. However, sometimes we may want the app to use a fixed orientation. For example, the app must always in portrait mode despite the device is in landscape orientation and the auto rotation setting of the device is turned on. This tutorial shows you how to do so.

Flutter has built-in function SystemChrome.setPreferredOrientations that allows us to set orientation of application. It has a paramater orientations whose type is List<DeviceOrientation> on which we can pass a list of allowed orientations. It returns Future<void>. In order to use that function, we need to import package:flutter/services.dart. Below is the usage example of setPreferredOrientations.

  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';

  Future main() async {
    await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    runApp(new MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
      Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Display Orientation Tutorial'),
          ),
          body: Center(
            child: Text(
                "Woolha.com"
            )
          ),
        ),
      );
    }
  }

The code above forces the orientation to be always portrait up. The list of supported orientations are:

  • landscapeLeft
  • landscapeRight
  • portraitDown
  • portraitUp

If you want to allow more than one orientations, you can pass a list of multiple DeviceOrientation. The example below forces the application to be always in landscape left or landscape right.

  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight
  ]);