Screen Orientation In Flutter

Shaiq khan
Sep 12 · 5 min read
Image for post
Image for post

Mobile applications need to help a vast extent of device sizes, pixel densities, and orientations. Applications ought to have the alternative to scale well, handle orientation changes, and suffer data through all these. Flutter enables you to pick the best way to deal with handle these challenges instead of merely giving one particular explicit solution.

In this article, we will explore Screen Orientation In Flutter. We will also implement a demo program on how to handle screen orientation in your flutter applications.

Table Of Contents::

Screen Orientation

Orientation Builder

Portrait mode

Landscape Mode

Code File

Conclusion

Screen Orientation :

Any is an orientation that implies the screen can be bolted to any of the portrait and landscape. The default screen orientation is the arrangement of orientations to which the screen is locked when there is no current orientation lock.

There are two types of screen orientation are:

  • Portrait
  • Landscape

Demo Module::

Image for post
Image for post

This video showed a portrait mode and landscape mode of our screen.

Orientation Builder :

It Creates an orientation builder. The builder() argument must not be invalid.

The orientation class gives us the landscape mode, portrait mode. We can utilize these perspectives to check the device orientation, and afterward, we can change the application screen to see as follows.

body: OrientationBuilder(
builder: (context, orientation){
if(orientation == Orientation.portrait){
return portraitMode();
}else{
return landscapeMode();
}
},
),

The OrientationBuilder has a builder function to build our format. The builder() work is considered when the orientation changes. The potential values being Orientation.portrait or Orientation.landscape.

In this example, we check if the screen is in a portrait view and construct a portrait mode if that is the case, else we construct a landscape mode for the screen.

_portraitMode() and _landscapeMode() are techniques I’ve written to make the particular formats.

We can likewise check the orientation anytime in the code (inside or outside the OrientationBuilder), utilizing.

MediaQuery.of(context).orientation

Note: For that time when we’re lazy and/or the only portrait will do, use

SystemChrome.setPreferredOrientations(DeviceOrientation.portraitUp);

Portrait Mode :

At the point when an application is showing in portrait orientation, there is substantially more tallness accessible. This makes it easy to vertically list the entirety of our widgets as there is sufficient space for the entirety of this.

In this portrait mode, we will use the return stack(). In this function, we will add a text and image of the flutter devs logo on a center.

Widget _portraitMode(){
return Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Portrait Mode",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 30,),
new Image.asset(
'assets/devs.jpg',
height: 200,
width: 200,
),
],
),
],
);
}

The portrait layout was achieved by using a single column arrangement. You’ll also notice we gave the logo and text in a center.

Image for post
Image for post

Landscape Mode :

At the point when an application is showing in landscape orientation, there is substantially less tallness accessible. This makes it difficult to vertically list the entirety of our widgets as there is sufficiently not space for the entirety of this.

In this landscape mode, we will use the return stack(). In this function, we will add a text and image of the aeologic technology logo on a center.

Widget _landscapeMode(){
return Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Landscape Mode",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 30,),
new Image.asset('assets/powered_by.png',
height: 50.0,
fit: BoxFit.cover,
)
],
),
],
);
}

The landscape layout was achieved by using a single column arrangement. We will add a logo of our company and a text in a center.

Image for post
Image for post

When you run the code, the output will come in a portrait way. You will be on auto-rotate mode on your devices for view landscape mode.

Code File

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


Widget _portraitMode(){
return Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Portrait Mode",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 30,),
new Image.asset(
'assets/devs.jpg',
height: 200,
width: 200,
),
],
),
],
);
}


Widget _landscapeMode(){
return Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Landscape Mode",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 30,),
new Image.asset('assets/powered_by.png',
height: 50.0,
fit: BoxFit.cover,
)

],
),
],
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Screen Orientation In Flutter"),
centerTitle: true,
),
body: OrientationBuilder(
builder: (context, orientation){
if(orientation == Orientation.portrait){
return _portraitMode();
}else{
return _landscapeMode();
}
},
),
);
}
}

Conclusion :

In the article, I have explained the basic demo of Screen Orientation. You can modify this code according to your choice, and this was a small basic introduction of Screen Orientation from my side and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Screen Orientation in Flutter in your flutter projects. This is a demo example show two ways of screen Orientation. The first one is portrait mode, and the others were landscape mode, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Screen Orientation Demo:

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Image for post
Image for post

FlutterDevs intent to deliver Flutter apps with high…

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app