Flutter Detect Device Orientation Landscape or Portrait Load Different UI Layout Example

Flutter gives us a widget named as OrientationBuilder which is used to detect orientation in flutter apps. The OrientationBuilder widget will automatically compares Width and Height of device and in return us a True false Boolean value based on orientation. If device width is grater than height then device orientation is Landscape. If device height is grater than width then device orientation is Portrait. The Widget build area of flutter class loads each time when device rotate or its orientation is changed. So in this tutorial we would Flutter Detect Device Orientation Load Different UI Layout Based on Orientation. We would change the Child Widget based upon Portrait and Landscape orientation.

Contents in this project Flutter Detect Device Orientation Load Different UI Layout Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method. Here we would call our main MyApp class.

3. Create our main MyApp extends StatelessWidget. This is our main Layout class.

4. Create a Custom Widget function named as _portraitView(). In this widget we would return a filled container view with Portrait View Detected Text. We would load this widget when device orientation is Portrait.

5. Create another Widget named as _landscapeView(). We would load this widget on Landscape orientation detection time.

6. Creating Widget Build area in MyApp class. Now we would make Scaffold widget and make OrientationBuilder widget in body section of Scaffold widget. In return section we would use orientation == Orientation.portrait and based upon the return value we would load Portrait or Landscape layout widget.

7. Complete source code for main.dart file:


Flutter Detect Device Orientation Load Different UI Layout Example


  1. OrientationBuilder is technically not for the device, but for the widget. If I have a widget that is wide and not that tall it will show “landscape” even if the device is in “portrait” mode.

Leave a Reply

Your email address will not be published. Required fields are marked *