Flutter开发：如何让平板支持Landscape/Portrait、手机仅Portrait？

实现方案 #

通过判断设备类型，动态设置允许的屏幕方向，实现平板支持横竖屏、手机仅竖屏的需求。

1. 判断设备类型 #

方式一：基于屏幕尺寸（简单快捷）

利用Flutter原生MediaQuery，通过屏幕最短边长度区分平板和手机（官方推荐阈值600dp）：

bool isTablet(BuildContext context) {
  return MediaQuery.of(context).size.shortestSide >= 600;
}

方式二：基于设备信息（精准判断）

使用device_info_plus包获取设备具体类型，先添加依赖到pubspec.yaml：

dependencies:
  device_info_plus: ^9.0.2

再实现判断逻辑：

import 'package:device_info_plus/device_info_plus.dart';
import 'dart:io';

Future<bool> isTablet() async {
  final deviceInfo = DeviceInfoPlugin();
  if (Platform.isAndroid) {
    return (await deviceInfo.androidInfo).isTablet;
  } else if (Platform.isIOS) {
    return (await deviceInfo.iosInfo).model.contains('iPad');
  }
  return false;
}

2. 动态设置屏幕方向 #

导入flutter/services.dart，根据设备类型设置允许的方向：

import 'package:flutter/services.dart';

void setOrientation(BuildContext context) async {
  bool isTabletDevice = isTablet(context); // 若用方式二，替换为await isTablet()
  await SystemChrome.setPreferredOrientations(
    isTabletDevice
        ? [
            DeviceOrientation.portraitUp,
            DeviceOrientation.portraitDown,
            DeviceOrientation.landscapeLeft,
            DeviceOrientation.landscapeRight,
          ]
        : [
            DeviceOrientation.portraitUp,
            DeviceOrientation.portraitDown,
          ],
  );
}

3. 在应用中调用 #

全局设置（推荐）

在MaterialApp的初始化逻辑中调用，确保整个应用生效：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    setOrientation(context);
    return MaterialApp(
      home: const HomePage(),
    );
  }
}

若使用异步的设备判断方法（方式二），用FutureBuilder处理：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: isTablet(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          SystemChrome.setPreferredOrientations(
            snapshot.data!
                ? [
                    DeviceOrientation.portraitUp,
                    DeviceOrientation.portraitDown,
                    DeviceOrientation.landscapeLeft,
                    DeviceOrientation.landscapeRight,
                  ]
                : [
                    DeviceOrientation.portraitUp,
                    DeviceOrientation.portraitDown,
                  ],
          );
        }
        return const MaterialApp(home: HomePage());
      },
    );
  }
}

4. 平台配置注意事项 #

• Android：确保AndroidManifest.xml的activity标签包含方向相关配置：

  <activity
      android:name=".MainActivity"
      android:configChanges="orientation|screenSize|smallestScreenSize"
      ...>
  

• iOS：在Info.plist中声明支持的屏幕方向（Flutter动态设置会覆盖此配置，但建议保持完整）：

  <key>UISupportedInterfaceOrientations</key>
  <array>
      <string>UIInterfaceOrientationPortrait</string>
      <string>UIInterfaceOrientationPortraitUpsideDown</string>
  </array>
  <key>UISupportedInterfaceOrientations~ipad</key>
  <array>
      <string>UIInterfaceOrientationPortrait</string>
      <string>UIInterfaceOrientationPortraitUpsideDown</string>
      <string>UIInterfaceOrientationLandscapeLeft</string>
      <string>UIInterfaceOrientationLandscapeRight</string>
  </array>
  

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