May

Flutter Auto Orientation

Flutter Auto Orientation:

In this tutorial, we are going to create Flutter Auto Device Orientation to the landscape from portrait and vice versa automatically when we rotate the android OR IOS device it sets it’s orientation automatically here we no need to select the device.

The Flutter auto device orientation works for both Android and IOS devices for both the directions from left to right OR right to left direction.

Creating Flutter Auto Device Orientation:

Add the dependency package:

To implement Flutter auto device orientation we have to add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
auto_orientation: ^1.0.1

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:auto_orientation/auto_orientation.dart';

Use the below example code to implement auto device rotation in Flutter.

AutoOrientation.landscapeLeftMode();
or
AutoOrientation.landscapeRightMode();
or
AutoOrientation.portraitUpMode();

Complete Example code for Flutter Auto Device Orientation:

Copy and Paste the below code into your main.dart file

main.dart

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

void main() {
runApp(
AutoOrientationDemo(),
);
}

class AutoOrientationDemo extends StatefulWidget {
AutoOrientationDemo({this.title = 'Auto Orientation Demo'});

final String title;

@override
State createState() {
return _AutoOrientationDemoState();
}
}

class _AutoOrientationDemoState extends State {
TargetPlatform _platform;

@override
void initState() {
super.initState();
}

@override
void dispose() {
super.dispose();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: widget.title,
theme: ThemeData.light().copyWith(
platform: _platform ?? Theme.of(context).platform,
),
home: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
Row(
children: [
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
AutoOrientation.landscapeLeftMode();
},
child: Padding(
child: Text("Landscape left mode only"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
AutoOrientation.landscapeRightMode();
},
child: Padding(
child: Text("Landscape right mode only"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
],
),

Row(
children: [
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
AutoOrientation.portraitUpMode();
},
child: Padding(
child: Text("Portrait up mode only"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
AutoOrientation.portraitDownMode();
},
child: Padding(
child: Text("Portrait down mode only"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
],
),

Row(
children: [
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
AutoOrientation.landscapeLeftMode();
},
child: Padding(
child: Text("Landscape left mode"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
AutoOrientation.landscapeRightMode();
},
child: Padding(
child: Text("Landscape right mode"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
],
),
Row(
children: [
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
AutoOrientation.portraitUpMode();
},
child: Padding(
child: Text("Portrait up mode"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
Expanded(
child: FlatButton(
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
AutoOrientation.portraitDownMode();
},
child: Padding(
child: Text("Portrait down mode"),
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
),
],
)
],
),
),
);
}
}

Congratulations You Have Learned Creating Flutter Auto Device Rotation….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext