how to disable rotation in mobile browser in flutter web app

Question

i am working on a flutter app where there is web app and in desktop its looking good but when i open it on mobile browser in portrait mode its correct and when the device is rotated the design is also rotated and the design breaks. how can i disable rotation of my web site in mobile browser even though the mobile is taken in landscape mode? i have given this in main.dart but it doesn't made any difference.

SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);

Answer 1

I don't think you can avoid that with code: the orientation for a web app is dictated by the browser, so your app can try as much as it can but it won't go anywhere near succeeding. The browser is the master here, and it won't allow a single page to dictate its orientation.

I think that there's only an option here: work with CSS and write two different layouts, one for landscape and one for portrait (but I'm no expert in CSS, I can't help you), so that the landscape rotation will still have a good-looking design.

Answer 2

You can try to use this api in order to achive the behavior. Howewer, there is no guarantiee that clients browser would support that API, so most of apps implementing a fallback where they detecting current orientation and then ask user to rotate the device if needed.