Your First Flutter App: An App From Scratch

In this episode, we’ll complete the third item on our programming to-do-list: switching the app from portrait to landscape mode.

When putting together your app, you’ll next think about the orientation of a device. Portrait mode is when your phone is “upright” or vertical. Landscape mode is when you tilt your phone to the side. You can configure your apps to work in either - or both of these orientations.

For Bull’s Eye, we want to make the app work only in landscape mode, because the game just looks and feels better that way. As you’ll see, you can set up your orientation in Flutter, but you’ll also need to make some adjustments to the iOS platform for older iOS devices

When working with Flutter, you’ll see that there folders for each target platform. Right now, we’re deploying to both iOS and Android so there’re both iOS and Android folders. You can make configuration changes in these folders. Of course, these changes are platform specific so it will be beneficial to study both iOS and Android platforms so you can understand the various configuration options.

To get started, open your project in progress, or download the sample app for this episode. We’re going to import the services library. This contains a lot of useful tools when interacting with the target platform like motion controls and the clipboard.

Open up main.dart and import the services library.

import 'package:flutter/services.dart';

Next, before we set orientations, we’re going to refactor our code. That is, reorganize it to make it cleaner. We’ll start by creating a new stateless widget. Underneath the main method, type ST. From the options, select the Stateless Widget option.

Give it the name, BullsEyeApp. Now copy MaterialApp widget from the main method, and paste it in the build method of our new BullsEyeApp widget.

@override
Widget build(BuildContext context) {
  return const MaterialApp(
    title: 'Bullseye',
    home: GamePage(),
  );
}

Next update the main method to return our new Bullseye app widget.

void main() {
  runApp(const BullsEyeApp());
}

And now our app is much cleaner. We’ve encapsulated our app into a widget. Very cool. Next, lets set our orientation. In the build method of the BullsEyeApp, set the orientation by way of the SystemChrome

class BullsEyeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    return MaterialApp(

Here we are supporting both landscape left and landscape right by adding the list of DeviceOrientation that we want to have in setPrefferedOrientations. Now, build and run on an android device.

You’ll notice when the app starts up, the interface is correctly showing up in landscape while the device is oriented in portrait mode. By pressing the rotate buttons, you can rotate the emulator.

Now for iOS. Open the iOS folder and then open the Runner folder. Open up the info.plist file. This contains all the various configuration options in iOS. In Xcode, you automatically add keys to it. For now, we’ll need to manually edit the code.

For the phone version, remove the portrait orientation. We’ll leave the iPad’s orientations as is. Now save and start the iOS simulator and now we have our bullseye app up and running. This time, we’ll rotate by pressing command right or command left.

Nice work.