Ultimate Guide to Set & Lock Screen Orientation in Flutter

To ensure that your users have a seamless experience, we’ll walk you through the process of controlling the screen orientation in your Flutter app in this guide. Let’s get started and discover how to manage the orientation of your app!

First, import the services package:

import 'package:flutter/services.dart';

This will give you access to the SystemChrome class, which "Controls specific aspects of the operating system's graphical interface and how it interacts with the application."

Application-wide orientation:

If you want to lock the screen orientation for the entire application, you can use the SystemChrome.setPreferredOrientations method in the main function of your app. This method takes a list of preferred orientations as input and sets the allowed screen orientations for the app.

Portrait Mode

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(MyApp());
}

Example

Here’s an example code snippet for setting the app-wide orientation to portrait mode:

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

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

In this code snippet, we’ve used the SystemChrome.setPreferredOrientations method to set the allowed screen orientations to portrait mode. We’ve also included both portraitUp and portraitDown orientations to allow for changes in device orientation.

Landscape Mode

If you want to set the app-wide orientation to landscape mode, you can use the DeviceOrientation.landscapeLeft and/or DeviceOrientation.landscapeRight values in the list of preferred orientations instead.

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]);
  runApp(MyApp());
}

Single Screen Orientation

When you load the Widget, do something like this:

Landscape Mode

@override
void initState(){
  super.initState();
  SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
  ]);
}

Portrait Mode

@override
void initState(){
  super.initState();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
}

then when leave the page, put it back to normal like this:

@override
dispose(){
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  super.dispose();
}