Flutter：仅禁用宽度700px以下移动端的横屏显示方向

实现逻辑 #

通过监听屏幕尺寸变化，动态设置允许的屏幕方向：当屏幕宽度小于700px时，锁定竖屏；宽度≥700px时，允许横竖屏自由切换。

具体实现步骤 #

1. 混入屏幕监听类
   让页面的State类混入WidgetsBindingObserver，用于监听屏幕尺寸的变化事件。

2. 初始化与清理监听
   在initState中添加监听，dispose中移除监听，避免内存泄漏。

3. 动态设置方向
   通过MediaQuery获取当前屏幕宽度，调用SystemChrome.setPreferredOrientations方法设置对应允许的方向集合。

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 初始化时先设置一次方向
    _updateOrientation();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 屏幕尺寸变化时重新更新方向
    _updateOrientation();
  }

  void _updateOrientation() {
    final screenWidth = MediaQuery.of(context).size.width;
    if (screenWidth < 700) {
      // 宽度不足700px，仅允许竖屏
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
    } else {
      // 宽度达标，允许所有方向
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('屏幕方向控制示例')),
        body: Center(
          child: Text('当前屏幕宽度: ${MediaQuery.of(context).size.width}px'),
        ),
      ),
    );
  }
}

注意事项 #

• Android端需要在AndroidManifest.xml的activity标签中设置android:screenOrientation="fullSensor"，确保动态设置方向生效。
• iOS端需要在Info.plist中添加所有支持的方向权限，否则部分方向会被系统限制。

内容的提问来源于stack exchange，提问作者RishV