I am actually trying to figure out if the app is running on a smartphone or tablet in my flutter app but the package device_info
can only tell about the device but not whether the device is a smartphone or tablet. Is there a way we can do this by checking the size of the device?
Many thanks Mahi
We can get current device information from within the Flutter application by using the device_info_plus package. Which is supports all kinds of platforms, including Android, iOS, macOS, web, Linux, and Windows.
By using kIsWeb we can check if our flutter app is running on web or mobile, as it return true if run on web. So to use kIsWeb constant we must import foundation. dart in-build library.
Step 1: Add the import statement import 'package:flutter/foundation. dart'; to your file. The above code snippet checks if the current platform is Android or not. It first detects the current platform using defaultTargetPlatform and compares it with the values inside the TargetPlatform.
// 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;
Copied from https://flutter.rocks/2018/01/28/implementing-adaptive-master-detail-layouts/
Thanks @Sergi
You can use this if you don't have an access to BuildContext. I took it out from 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';
}
One of the ways is calculated diagonal for screen resolution.
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With