Introduction

In Flutter, handling device orientation changes allows your app to adapt its user interface and layout based on portrait or landscape mode. By supporting different orientations, you can provide a seamless user experience across various devices and screen orientations. In this tutorial, you will learn how to handle device orientation changes in your Flutter app.

Content

To handle device orientation changes in Flutter, follow these steps:

Step 1. Import Package:

Import the necessary packages in your Dart file:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

Read more"Explore Flutter Widgets to Create Cross-Platform Apps"

In your main method, set the preferred orientations for your app. You can specify whether your app should support only portrait mode, only landscape mode, or both.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
  runApp(MyApp());
}

In this example, we set the preferred orientations to support both portrait and landscape modes.

Step 3. Handle Orientation Changes

To handle orientation changes, you can use the OrientationBuilder widget. Wrap the part of your UI that needs to respond to orientation changes with OrientationBuilder, and use the orientation parameter to determine the current device orientation.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Orientation Demo'),
    ),
    body: OrientationBuilder(
      builder: (context, orientation) {
        return GridView.count(
          crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,
          children: <Widget>[
            // Your UI components
          ],
        );
      },
    ),
  );
}

In this example, we adjust the crossAxisCount property of GridView.count based on the current orientation. The grid will display 2 columns in portrait mode and 3 columns in landscape mode.

Sample Code:

import 'package:flutter/material.dart';

class OrientationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Orientation Example'),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  orientation == Orientation.portrait
                      ? Icons.phone_android
                      : Icons.tablet_android,
                  size: 100,
                ),
                SizedBox(height: 20),
                Text(
                  orientation == Orientation.portrait
                      ? 'Portrait Mode'
                      : 'Landscape Mode',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Orientation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OrientationExample(),
    );
  }
}

Output:

Conclusion:

By following these steps, you can handle device orientation changes in Flutter and adapt your app’s UI and layout based on portrait or landscape mode. Ensure a seamless user experience by supporting different orientations and providing an optimized layout for each orientation in your Flutter app.