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 :
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::
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.
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.
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:
flutter-devs/flutter_screen_orientation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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 a 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.
