Setting Device Orientation in Your Flutter App

How big is the device you’ll be running your Flutter app on? The answer is "You don't know." You can run a Flutter app on a small iPhone 6, or in a web page on a 50-inch screen. You want your app to look good no matter what size the device happens to be. How can you do that? The Dart code below has the answer

Checking Device Orientation in a Flutter App

// App0613.dart
import 'package:flutter/material.dart';
import 'App06Main.dart';
Widget buildColumn(context) {
 if (MediaQuery.of(context).orientation == Orientation.landscape) {
  return _buildOneLargeRow();
 } else {
  return _buildTwoSmallRows();
 }
}
Widget _buildOneLargeRow() {
 return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
   Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
     buildRoundedBox("Aardvark"),
     buildRoundedBox("Baboon"),
     buildRoundedBox("Unicorn"),
     buildRoundedBox("Eel"),
     buildRoundedBox("Emu"),
     buildRoundedBox("Platypus"),
    >,
   ),
  >,
 );
}
Widget _buildTwoSmallRows() {
 return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
   Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
     buildRoundedBox("Aardvark"),
     buildRoundedBox("Baboon"),
     buildRoundedBox("Unicorn"),
    >,
   ),
   SizedBox(
    height: 30.0,
   ),
   Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
     buildRoundedBox("Eel"),
     buildRoundedBox("Emu"),
     buildRoundedBox("Platypus"),
    >,
   ),
  >,
 );
}

The following images show what happens when you run the Dart code above. When the device is in portrait mode, you see two rows, with three boxes on each row. But when the device is in landscape mode, you see only one row, with six boxes.

Here's the portrait option.

And the landscape mode.

The difference comes about because of the if statement in the above Dart code.

if (MediaQuery.of(context).orientation == Orientation.landscape) {
 return _buildOneLargeRow();
} else {
 return _buildTwoSmallRows();
}

Yes, the Dart programming language has an if statement. It works the same way that if statements work in other programming languages.

if (a certain condition is true) {
 Do this stuff;
} otherwise {
 Do this other stuff;
}

In the name MediaQuery, the word Media refers to the screen that runs your Flutter app. When you call MediaQuery.of(context), you get back a treasure trove of information about that screen, such as

• orientation: Whether the device is in portrait mode or landscape mode
• height and size.width: The number of dp units from top to bottom and across the device's screen
• longestSide and size.shortestSide: The larger and smaller screen size values, regardless of which is the height and which is the width
• aspectRatio: The screen's width divided by its height
• devicePixelRatio: The number of physical pixels for each dp unit
• padding, viewInsets, and viewPadding: The parts of the display that aren't available to the Flutter app developer, such as the parts covered up by the phone's notch or (at times) the soft keyboard
• alwaysUse24HourFormat: The device's time display setting
• platformBrightness: The device's current brightness setting
• . . . and many more

For example, a Pixel C tablet with 2560-by-1800 dp is big enough to display a row of six animal boxes in either portrait or landscape mode. To prepare for your app to run on such a device, you may not want to rely on the device's orientation property. In that case, you can replace the condition in the code above with something like the following:

if (MediaQuery.of(context).size.width >= 500.0) {
 return _buildOneLargeRow();
} else {
 return _buildTwoSmallRows();
}

Notice the word context in the code MediaQuery.of(context). In order to query media, Flutter has to know the context in which the app is running. That's why, _MyHomePage class's build method has a BuildContext context parameter.

Want to learn more tricks? Avoid these ten mistakes when programming your Flutter app.