CODEWITHSUNDEEP
androidiosflutterdartflutter-layout
Dipankar Baghel
Dipankar Baghel

Reputation: 2049

How to show different layout for landscape and portrait in flutter

Just wanted to know how we can show different layout for landscape and portrait in flutter. In Native for android we just create layout and layout-land folder and put xml files there and system will automatically detect the appropriate layout for orientation. Any help on flutter would be appreciated. Thanks

Upvotes: 5

Views: 1468

Answers (2)

mr.SoSerious
mr.SoSerious

Reputation: 121

Use orientation builder and check inside if the orientation is portrait or landscape. Check the documentation here.

Sample Code:

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

Upvotes: 0

Naveen Avidi
Naveen Avidi

Reputation: 3073

Use official widget like docs says https://flutter.dev/docs/cookbook/design/orientation

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

Upvotes: 4

Related Questions