Flutter UI Orientation with Example

In Flutter, you can create different user interface (UI) layouts for portrait and landscape orientations of the device. In this blog, we will discuss how to implement UI orientation in Flutter with an example.

Step 1: Setting the Orientation Preferences

The first step is to set the orientation preferences for your Flutter app. You can do this by adding the following lines of code to your main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Set preferred orientations
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
  runApp(MyApp());
}​

In this code, we import the flutter/services.dart package to use the SystemChrome class, which allows us to set the preferred orientations for the app. We set the preferred orientations to portraitUp, portraitDown, landscapeLeft, and landscapeRight, which means that the app will support both portrait and landscape orientations.

Step 2: Creating Different UI Layouts

The next step is to create different UI layouts for portrait and landscape orientations. You can do this by using the OrientationBuilder widget in Flutter. This widget provides a callback that takes an BuildContext and an Orientation parameter. You can use this callback to define different UI layouts based on the orientation of the device.

Here is an example of how to use the OrientationBuilder widget to create different UI layouts for portrait and landscape orientations:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UI Orientation Example',
      home: OrientationBuilder(
        builder: (context, orientation) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Flutter UI Orientation Example'),
            ),
            body: orientation == Orientation.portrait
                ? buildPortraitLayout()
                : buildLandscapeLayout(),
          );
        },
      ),
    );
  }
  Widget buildPortraitLayout() {
    return Center(
      child: Text('Portrait Layout'),
    );
  }
  Widget buildLandscapeLayout() {
    return Center(
      child: Text('Landscape Layout'),
    );
  }
}​

In this example, we have defined a MyApp class that extends the StatelessWidget class. In the build method, we create a MaterialApp widget that contains an OrientationBuilder widget. Inside the OrientationBuilder widget, we define two different UI layouts for portrait and landscape orientations using the buildPortraitLayout and buildLandscapeLayout methods.

When the app is in portrait orientation, the buildPortraitLayout method is called, which displays a Center widget with the text "Portrait Layout". When the app is in landscape orientation, the buildLandscapeLayout method is called, which displays a Center widget with the text "Landscape Layout".

we have discussed how to implement UI orientation in Flutter with an example. By setting the preferred orientations and using the OrientationBuilder widget, you can create different UI layouts for portrait and landscape orientations of the device. This can help to improve the user experience of your app on different devices.