How to Listen Screen Orientation Mode Change in Flutter

How to Listen Screen Orientation Mode Change in Flutter

Creating apps that look great on every screen is a hallmark of a professional Flutter developer. A key part of this is building responsive UIs that adapt when a user rotates their device between portrait and landscape mode.

So, how do you detect an orientation change and rebuild your layout accordingly? Flutter provides a simple and efficient widget for this exact purpose: the OrientationBuilder.

The OrientationBuilder Widget (The Recommended Way)

The OrientationBuilder is a widget that listens for changes in the parent widget’s orientation and rebuilds its child whenever that orientation changes. It’s the most direct and reliable way to create different layouts for portrait and landscape modes.

How It Works

The OrientationBuilder‘s builder function gives you two arguments: the BuildContext and the current Orientation. The Orientation is an enum with two possible values:

• Orientation.portrait: The available height is greater than the width.
• Orientation.landscape: The available width is greater than the height.

You can use a simple conditional check inside the builder to return the appropriate widget for the current orientation.

Code Example

Here is a basic example that displays different text and colors based on the screen’s orientation.

import 'package:flutter/material.dart';
class OrientationScreen extends StatelessWidget {
  const OrientationScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Orientation Example'),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          if (orientation == Orientation.portrait) {
            return _buildPortraitLayout();
          } else {
            return _buildLandscapeLayout();
          }
        },
      ),
    );
  }
  Widget _buildPortraitLayout() {
    return const Center(
      child: Text(
        'Portrait Mode',
        style: TextStyle(fontSize: 24, color: Colors.blue),
      ),
    );
  }
  Widget _buildLandscapeLayout() {
    return const Center(
      child: Text(
        'Landscape Mode',
        style: TextStyle(fontSize: 24, color: Colors.red),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class OrientationScreen extends StatelessWidget {
  const OrientationScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Orientation Example'),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          if (orientation == Orientation.portrait) {
            return _buildPortraitLayout();
          } else {
            return _buildLandscapeLayout();
          }
        },
      ),
    );
  }

  Widget _buildPortraitLayout() {
    return const Center(
      child: Text(
        'Portrait Mode',
        style: TextStyle(fontSize: 24, color: Colors.blue),
      ),
    );
  }

  Widget _buildLandscapeLayout() {
    return const Center(
      child: Text(
        'Landscape Mode',
        style: TextStyle(fontSize: 24, color: Colors.red),
      ),
    );
  }
}

Practical Example: A Responsive Grid

A common real-world use case is changing the number of columns in a grid. You might want two columns in portrait mode and four in landscape to make better use of the wider screen.

The OrientationBuilder makes this trivial.

import 'package:flutter/material.dart';
class ResponsiveGridScreen extends StatelessWidget {
  const ResponsiveGridScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive Grid'),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          // Determine the number of columns based on orientation
          final int crossAxisCount =
              (orientation == Orientation.portrait) ? 2 : 4;
          return GridView.builder(
            padding: const EdgeInsets.all(8.0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: crossAxisCount,
              crossAxisSpacing: 8.0,
              mainAxisSpacing: 8.0,
            ),
            itemCount: 20, // Example item count
            itemBuilder: (context, index) {
              return Container(
                color: Colors.teal[100 * (index % 9)],
                child: Center(
                  child: Text('Item $index'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

import 'package:flutter/material.dart';

class ResponsiveGridScreen extends StatelessWidget {
  const ResponsiveGridScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive Grid'),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          // Determine the number of columns based on orientation
          final int crossAxisCount =
              (orientation == Orientation.portrait) ? 2 : 4;

          return GridView.builder(
            padding: const EdgeInsets.all(8.0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: crossAxisCount,
              crossAxisSpacing: 8.0,
              mainAxisSpacing: 8.0,
            ),
            itemCount: 20, // Example item count
            itemBuilder: (context, index) {
              return Container(
                color: Colors.teal[100 * (index % 9)],
                child: Center(
                  child: Text('Item $index'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

When you rotate your device, the OrientationBuilder automatically rebuilds, changes the crossAxisCount, and the GridView seamlessly adapts its layout.

OrientationBuilder vs. MediaQuery

You can also get the current orientation using MediaQuery.of(context).orientation. So what’s the difference?

• MediaQuery: Gives you a “snapshot” of the device’s metrics (size, orientation, etc.) at the time the widget builds. It doesn’t, by itself, cause a rebuild when the orientation changes.
• OrientationBuilder: Is a widget specifically designed to listen for orientation changes and trigger a rebuild of its children.

For building layouts that explicitly depend on the portrait/landscape state, OrientationBuilder is the cleaner, more efficient, and recommended tool for the job.

Conclusion

By using the OrientationBuilder widget, you can easily create adaptive and professional-looking UIs that provide a great user experience on any device, in any orientation. This is a fundamental skill for any Flutter developer aiming to build high-quality, responsive applications.