iTranslated by AI
The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🤸♂️
How to change and simulate screen orientation in Flutter
TL;DR
- You can set the screen orientation using
SystemChrome.setPreferredOrientations.- By specifying it before
runApp, you can also fix the orientation for the entire app. - How to change screen orientation in flutter ? | Coding Ninja
- By specifying it before
- By rotating Widgets using
RotatedBoxorRotationTransition, you can simulate a screen orientation change, provided the amount of information doesn't require scrollbars.- You can even do things like keeping the AppBar in portrait while making the body landscape.
- Whether you actually want to do that is another story...
- Flutter - video_player fullscreen | Stack Overflow
- RotatedBox class | Flutter
- RotationTransition class | Flutter
- You can even do things like keeping the AppBar in portrait while making the body landscape.
Setting the Screen Orientation
import 'package:flutter/services.dart'; // Required
// Something like this. Change `_landscape` wherever you need to.
// I used a switch case instead of a ternary operator because I thought it might be easier to read as a sample, though I'm not entirely sure if it is...
void changeLandscape() {
switch (_landscape) {
case false:
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitDown, DeviceOrientation.portraitUp]);
break;
case true:
// Use this when you want the right side to be the top.
// If you want the left side to be the top, specify DeviceOrientation.landscapeLeft.
SystemChrome.setPreferredOrientations(
[DeviceOrientation.landscapeRight]);
break;
}
}
Fixing the Screen Orientation
- [Flutter] How to fix the screen to portrait/landscape | ryohtarot/main.dart | Gist
- It seems separate handling is required for iPad.
- setPreferredOrientations not working in iPad #27235 | flutter / flutter | GitHub
- https://github.com/flutter/flutter/issues/27235
Rotating with RotatedBox
import 'package:flutter/material.dart';
...omitted
// Something like this. It's quite straightforward...
// Put your required Widget in YourWidget
// Change `_landscape` wherever you need to.
@override
Widget build(BuildContext context) {
return RotatedBox(
child: YourWidget(
),
quarterTurns: _landscape ? 1 : 0);
...omitted
- Flutter - video_player fullscreen | Stack Overflow
- It made me laugh that it was called "Genius!"
- https://stackoverflow.com/questions/52431109/flutter-video-player-fullscreen/52431324?stw=2#52431324
Discussion