How to disable landscape mode for flutter web?

Question

I am trying to disable the landscape mode for phone users on flutter web. I have used this code to disable it, well, it works when I run the project as an app, but it doesn't work for the web project.

  Widget build(BuildContext context) => ResponsiveSizer(
        builder: (context, orientation, screenType) {
          if (screenType == ScreenType.mobile) {
            SystemChrome.setPreferredOrientations(
                [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
          }

          return MaterialApp(
            title: 'App Title',
            debugShowCheckedModeBanner: false,
            theme: AppTheme.lightTheme,
            home: const HomePage(),
          );
        },
      );

Any idea how to achieve this?

Answer 1

You cannot disable landscape mode for web, this is not something for you to control.

Being a web app, you must be prepared for all kinds of sizes for the browser window. On desktop, users are allowed to resize their Chrome or Safari to whatever size they want. For mobile, when they turn their phone to landscape, it's the browser app that re-renders your webpage with a different browser window size.

I suggest you focus on making your web app more responsive instead.