Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect orientation change in layout in Flutter?

How to find out Orientation is portrait or landscape in Flutter

if(portrait){
  return ListView.builder()
}else{
  return GridView.count()
}
like image 808
Adarsh Vijayan P Avatar asked Jun 12 '18 10:06

Adarsh Vijayan P


People also ask

How do you check orientation in flutter?

To determine the app's current Orientation , use the OrientationBuilder widget. The OrientationBuilder calculates the current Orientation by comparing the width and height available to the parent widget, and rebuilds when the size of the parent changes.

How do you handle orientation changes in flutter?

This widget is already a part of the MaterialApp and WidgetsApp widget so you probably don't need to include it. If you want your widget to take advantage of the device orientation, you can use the MediaQuery. of static member to access a MediaQueryData , which contains the device orientation.

How flutter detect device orientation load different UI layout based on orientation?

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.

What is the difference between landscape and portrait orientation in flutter?

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.

How to display two columns in landscape mode in flutter?

In Flutter, you can build different layouts depending on a given Orientation . In this example, build a list that displays two columns in portrait mode and three columns in landscape mode using the following steps: Build a GridView with two columns. Use an OrientationBuilder to change the number of columns. 1. Build a GridView with two columns

How do I use the orientationbuilder?

The OrientationBuilder calculates the current Orientation by comparing the width and height available to the parent widget, and rebuilds when the size of the parent changes. Using the Orientation, build a list that displays two columns in portrait mode, or three columns in landscape mode.


4 Answers

In order to determine the Orientation of the screen, we can use the OrientationBuilder Widget. The OrientationBuilder will determine the current Orientation and rebuild when the Orientation changes.

new OrientationBuilder(
  builder: (context, orientation) {
    return new GridView.count(
      // Create a grid with 2 columns in portrait mode, or 3 columns in
      // landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

you can find the complete example here: https://flutter.io/cookbook/design/orientation/

like image 65
Siavash Avatar answered Oct 23 '22 00:10

Siavash


You can use MediaQuery to check orientation:

var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait
like image 28
Günter Zöchbauer Avatar answered Oct 23 '22 01:10

Günter Zöchbauer


it's quite easy

if (MediaQuery.of(context).orientation == Orientation.portrait){
    // is portrait
}else{
// is landscape
}
like image 19
Edgencio Da Calista Avatar answered Oct 22 '22 23:10

Edgencio Da Calista


@override
Widget build(BuildContext context) {
  return Scaffold(
    body: OrientationBuilder(builder: (_, orientation) {
      if (orientation == Orientation.portrait)
        return _buildPortraitLayout(); // if orientation is portrait, show your portrait layout
      else
        return _buildLandscapeLayout(); // else show the landscape one
    }),
  );
}
like image 5
CopsOnRoad Avatar answered Oct 23 '22 01:10

CopsOnRoad