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