There are two device screen orientation present in every mobile or Tablet device Landscape and Portrait. In mobile devices the default screen orientation mode is portrait. Every mobile phone has a Auto Rotation button present on Scrollable Menu bar. By default the Auto Rotation is disabled in mobile phones but we can enable them via Menu bar and the complete mobile phone screen will rotate on device rotation. But sometimes app developer wants to prevent Landscape mode and active only Portrait mode in flutter application. Here comes the DeviceOrientation.portraitUp method of SystemChrome package. This method would enable only the Portrait mode in flutter app. So in this tutorial we would Disable Screen Rotation Orientation in Flutter Android iOS App and Enable Portrait Mode Only.
Contents n this project Disable Screen Rotation Orientation in Flutter Android iOS App and Enable Portrait Mode Only:
1. Import material.dart and services.dart package in your flutter project’s main.dart file.
|
1 2 3 |
import 'package:flutter/material.dart'; import 'package:flutter/services.dart' ; |
2. Create void main runApp() method and call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create SystemChrome.setPreferredOrientations() method to disable Screen rotation in Widget build area of MyApp class just before the return part.
|
1 2 3 |
SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, ]); |
5. Create 1 Text widget in Widget build area to show some text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Disable Screen Rotation in Flutter App"), ), body: SafeArea( child : Center( child:Text('Disable Screen Rotation in Flutter App', style: TextStyle(fontSize: 21),) ) ) ), ); |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import 'package:flutter/material.dart'; import 'package:flutter/services.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, ]); return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Disable Screen Rotation in Flutter App"), ), body: SafeArea( child : Center( child:Text('Disable Screen Rotation in Flutter App', style: TextStyle(fontSize: 21),) ) ) ), ); } } |
Screenshots:
Gracias por el post
it work in pwa?
Yes
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
.then((_) {
runApp(new MyApp());
});