Flutter - Managing Device Orientation

Last Updated : 02 Jun, 2022

All the applications developers create in flutter run on multiple devices with a variety of screen pixels and sizes. Managing screen orientation in flutter plays an important role in establishing a successful app that runs on multiple devices. In flutter, you can pick the best way to deal with such challenges of device orientation in an easy and handy way. In this article, we will walk you through Screen Orientation in Flutter.

What is the need for orientation?

To learn orientation management, first, you need to understand the need to do so. Screen orientation management improves the user experience to a great extent. When you change the screen orientation, the action currently running over the app changes and re-builds itself according to the new orientation. For example, Changing orientation to landscape mode while playing a car racing game.

How to set device orientation?

Flutter provides namely 2 ways to orient the device namely:

Portrait
LandScape

Given below are the steps illustrated to change your mobile application orientation according to your suitability.

Step 1: Include the services packages in your main file.

Step 2: Call "WidgetsFlutterBinding.ensureInitialized()" method after the main function call.

Step 3: Call " SystemChrome.setPreferredOrientations" after you "WidgetsFlutterBinding.ensureInitialized()" method.

Now to set a portrait mode, flutter provides two orientation options namely:

DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,

Sample Code

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(HomeApp());
}

To set landscape mode, flutter provides two orientation options:

DeviceOrientation.landscapeLeft
DeviceOrientation.landscapeRight

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight
  ]);

  runApp(HomeApp());
}

How to manage Device Orientation?

Step 1:

Open the screen on which you want to manage the orientation.

Step 2:

Add an init() method and call SystemChrome.setPreferredOrientations in the mode you want to apply.

Step 3:

Add a dispose() method and call SystemChrome.setPreferredOrientations in the mode you want to remove.

Let's look at the steps closely with the help of examples

Example 1: To set the device orientation to Landscape Mode

Dart

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {
  runApp(HomeApp());
}

class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

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

  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ElevatedButton(
          child: Text('Click here'),
          style: OutlinedButton.styleFrom(
              backgroundColor: Colors.green,
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.normal),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),
      ),
    );
  }
}

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('You shifted to Landscape mode')),
    );
  }
}

Output:

Example 2: To Set the device orientation in Portrait mode

Dart

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {
   runApp(HomeApp());
}

class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
  }

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

  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ElevatedButton(
          child: Text('Click here'),
          style: OutlinedButton.styleFrom(
              backgroundColor: Colors.green,
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.normal),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),
      ),
    );
  }
}

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('You shifted to landscape mode')),
    );
  }
}