我们可以检查设备是智能手机还是平板电脑

Question

我实际上是在尝试弄清楚该应用程序是否在我的Flutter应用程序中运行在智能手机或平板电脑上，但软件包device_info只能说明设备，而不是设备是否是智能手机或平板电脑。有什么方法可以通过检查设备的大小来做到这一点？

非常感谢mahi

Answer 1

如果您无法访问buildContext，则可以使用此功能。我从sdk/flutter/packages/flutter/lib/src/widgets/app.dart:1252取出。

  String getDeviceType() {
    final data = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
    return data.size.shortestSide < 600 ? 'phone' :'tablet';
  }

Answer 2

// The equivalent of the "smallestWidth" qualifier on Android.
var shortestSide = MediaQuery.of(context).size.shortestSide;
// Determine if we should use mobile layout or not, 600 here is
// a common breakpoint for a typical 7-inch tablet.
final bool useMobileLayout = shortestSide < 600;

从https://flutter.rocks/2018/01/28/implementing-aptive-master-master-detail-layouts/

谢谢@Sergi

Answer 3

用于屏幕分辨率的对角线之一。

import 'package:flutter/widgets.dart';
import 'dart:math';
class TabletDetector {
  // iPhone 6S 
  // |_ [portrait]
  //    |_ size: 375.0x667.0, pixelRatio: 2.0, pixels: 750.0x1334.0
  //       |_ diagonal: 765.1888655750291
  // |_ [horizontal]
  //    |_ size: 667.0x375.0, pixelRatio: 2.0, pixels: 1334.0x750.0
  //       |_ diagonal: 765.1888655750291
  // iPhone X 
  // |_ [portrait]
  //    |_ size: 375.0x812.0, pixelRatio: 3.0, pixels: 1125.0x2436.0
  //       |_ diagonal: 894.4098613052072
  // |_ [horizontal]
  //    |_ size: 812.0x375.0, pixelRatio: 3.0, pixels: 2436.0x1125.0
  //       |_ diagonal: 894.4098613052072
  // iPhone XS Max 
  // |_ [portrait]
  //    |_ size: 414.0x896.0, pixelRatio: 3.0, pixels: 1242.0x2688.0
  //       |_ diagonal: 987.0217829409845
  // |_ [horizontal]
  //    |_ size: 896.0x414.0, pixelRatio: 3.0, pixels: 2688.0x1242.0
  //       |_ diagonal: 987.0217829409845
  // iPad Pro (9.7-inch) 
  // |_ [portrait]
  //    |_ size: 768.0x1024.0, pixelRatio: 2.0, pixels: 1536.0x2048.0
  //       |_ diagonal: 1280.0
  // |_ [horizontal]
  //    |_ size: 1024.0x768.0, pixelRatio: 2.0, pixels: 2048.0x1536.0
  //       |_ diagonal: 1280.0
  // iPad Pro (10.5-inch) 
  // |_ [portrait]
  //    |_ size: 834.0x1112.0, pixelRatio: 2.0, pixels: 1668.0x2224.0
  //       |_ diagonal: 1390.0
  // |_ [horizontal]
  //    |_ size: 1112.0x834.0, pixelRatio: 2.0, pixels: 2224.0x1668.0
  //       |_ diagonal: 1390.0
  // iPad Pro (12.9-inch) 
  // |_ [portrait]
  //    |_ size: 1024.0x1366.0, pixelRatio: 2.0, pixels: 2048.0x2732.0
  //       |_ diagonal: 1707.2000468603555
  // |_ [horizontal]
  //    |_ size: 1366.0x1024.0, pixelRatio: 2.0, pixels: 2732.0x2048.0
  //       |_ diagonal: 1707.2000468603555
  static bool isTablet(MediaQueryData query) {
    var size = query.size;
    var diagonal = sqrt(
      (size.width * size.width) + 
      (size.height * size.height)
    );
    /*
    print(
      'size: ${size.width}x${size.height}n'
      'pixelRatio: ${query.devicePixelRatio}n'
      'pixels: ${size.width * query.devicePixelRatio}x${size.height * query.devicePixelRatio}n'
      'diagonal: $diagonal'
    );
    */
    var isTablet = diagonal > 1100.0;
    return isTablet;
  }
}

Answer 4

这与其他ASWERS相同，但是返回enum而不是bool或String。由于它更加关闭，因此更容易使用。

import 'package:flutter/widgets.dart';
enum DeviceType { Phone, Tablet }
DeviceType getDeviceType() {
  final data = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
  return data.size.shortestSide < 550 ? DeviceType.Phone : DeviceType.Tablet;
}

感谢@chandler和@bakua的灵感：·(

Answer 5

尽管iOS在手机和平板电脑之间有明确的分离，但在Android中并没有发生这种情况。您需要根据屏幕宽度为基础选择。

检查本文以查看有关如何区分的示例：https：//flutter.rocks/2018/01/28/implementing-aptive-aptive-master-master-detail-layouts/

Answer 6

for android @chandler所说，您应该检查屏幕的最小尺寸，但是对于iOS，您可以使用device_info软件包确定它是否具有100％精度的iPad：

添加pubspec.yaml：

device_info: ^0.4.2+4

  static Future<bool> isTablet(BuildContext context) async {
    if (Platform.isIOS) {
      DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
      IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
      return iosInfo.model.toLowerCase() == "ipad";
    } else {
      // The equivalent of the "smallestWidth" qualifier on Android.
      var shortestSide = MediaQuery.of(context).size.shortestSide;
      // Determine if we should use mobile layout or not, 600 here is
      // a common breakpoint for a typical 7-inch tablet.
      return shortestSide > 600;
    }
  }

Answer 7

通常，Android平板电脑和iPad的长宽比(宽度：高(在0.75〜1.4的范围内，以下是检查的最快方法。我们可以根据纵横比调整UI。

bool isTablet;
double ratio = MediaQuery.of(context).size.width / MediaQuery.of(context).size.height;
if( (ratio >= 0.74) && (ratio < 1.5) )
{
  isTablet = true;
} else{
  isTablet = false;
}

Answer 8

您可以从Sizer软件包中使用DeviceType.tablet。您会做：

SizerUtil.deviceType == DeviceType.tablet

使用此逻辑设置字段，该逻辑与此处最受欢迎的答案相同。我已经使用sizer来使我的应用响应迅速，因此使用它来确定设备是否方便。

Answer 9

2023，从 @bakua的答案中启发的飞镖3解决方案，此答案

bool get isTablet {
  final firstView = WidgetsBinding.instance.platformDispatcher.views.first;
  final logicalShortestSide = firstView.physicalSize.shortestSide / firstView.devicePixelRatio;
  return logicalShortestSide > 600;
}

Answer 10

您可以使用 device_info_plus flutter的软件包https://pub.dev/packages/device_info_plus

static Future<bool> isTablet(BuildContext context) async {
bool isTab=false;
if (Platform.isIOS) {
  DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
  IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
  if(iosInfo.model?.toLowerCase() == "ipad"){
    isTab=true;
  }else{
    isTab=false;
  }
  return isTab;
} else {
  var shortestSide = MediaQuery.of(context).size.shortestSide;
  if(shortestSide > 600){
    isTab=true;
  }else{
    isTab=false;
  }
  return isTab;
}}

呼叫..

Future checkDeviceType() async {
bool iPad = await isTablet(context);
    
    if(iPad){
       //write your logic here..
     }
}

Answer 11

创建DART文件 "size_config.dart"

import 'dart:io';
import 'package:flutter/widgets.dart';
import 'dart:async';
import 'package:device_info_plus/device_info_plus.dart';
class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late double screenHeight;
  static late double blockSizeHorizontal;
  static late double blockSizeVertical;
  static late double safeBlockHorizontal;
  static late double safeBlockVertical;
  static bool isIpad = false;
  void init(BuildContext context) async {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;
    isIpad = await isTablet(context);
  }
  static Future<bool> isTablet(BuildContext context) async {
    bool isTab = false;
    if (Platform.isIOS) {
      DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
      IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
      if (iosInfo.model.toLowerCase() == "ipad") {
        isTab = true;
      } else {
        isTab = false;
      }
      return isTab;
    } else {
      var shortestSide = MediaQuery.of(context).size.shortestSide;
      if (shortestSide > 600) {
        isTab = true;
      } else {
        isTab = false;
      }
      return isTab;
    }
  }
}

呼叫

@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    var height = SizeConfig.screenHeight;
    var width = SizeConfig.screenWidth;
    bool isIpad = SizeConfig.isIpad;

Answer 12

我编写了此上下文扩展，具体取决于其他答案，对我有用：

extension ContextExt on BuildContext {
    bool get isPhone => MediaQuery.of(this).size.width < 600.0;
    bool get isTablet => MediaQuery.of(this).size.width >= 600.0;
}

用法：

final iconSize = context.isTablet ? 50.0 : 30.0;