Skip to main content

Flutter Disable Landscape Mode Orientation

Flutter app by default build with Rotation enabled. Here rotation means changing orientation of app between Portrait mode and landscape mode. To disable the landscape mode rotation we will use SystemChrome.setPreferredOrientations() and define proffered rotation as Portrait. To disable rotation in progressive web app PWA we will use System Chrome with WidgetsFlutterBinding.ensureInitialized().

Flutter Disable Landscape Mode Orientation

1. Import services.dart file.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
2. Always put System Chrome and Widget Binding code in the void main function. This will automatically disabled screen rotation in whole app in all the sub children screens.
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(App());
}
Source code for main.dart file:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Scaffold(
            body: Center(
      child: Text(
        'Flutter Disable App Screen Rotation',
        style: TextStyle(fontSize: 24),
        textAlign: TextAlign.center,
      ),
    )));
  }
}
Screenshot:
Flutter Disable Landscape Mode Orientation


Comments