Thursday, March 28, 2024

Checking device Orientation in Flutter

Today i am going to explain how to check device orientation using simple way.
Knowing the device orientation helps in laying out the appropriate UI.Like changing rows and columns etc. We can achieve this using mediaQuery and OrientationBuilder.

Using OrientationBuilder we cannot get actual device orientation because its return the total amount of space available to the parent .

So MediaQuery is the Best options to figure out the device orientation.

MediaQuery.of(context).orientation

Following Example change app title based on device orientation.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"Orientation Sample",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePageWidget(),
    );
  }
}

class HomePageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    final Orientation orientationMode = MediaQuery.of(context).orientation;
    final bool isportraitMode = orientationMode == Orientation.portrait;

    return Scaffold(
      appBar: AppBar(
        title: Text(isportraitMode? "portrait app mode":"landscape app mode"),
        leading: IconButton(icon: Icon(Icons.access_time), onPressed: () {}),
      ),
      body: new Center(
            child: new Text('Orientation Sample'),
        )
    );
  }
}

The Above sample changing app title based on Device orientation

Demo