Contents
Outline
In this blog post, I will show you how to use GetX to get platform or device info in Flutter. You can see full source code of this blog post on the link below.
Blog series
This blog post is made in the series about how to use GetX in Flutter. If you want to see the other features of the GetX, please check out the following blog posts.
- [GetX] State management
- [GetX] Route management
- [GetX] Dependency management
- [GetX] Localization
- [GetX] Theme
- [GetX] BottomSheet
- [GetX] Dialog
- [GetX] Snackbar
- [GetX] Platform and device info
GetX installation
To check how to use GetX in Flutter, execute the command below to create a new Flutter project.
flutter create utils
And then, execue the command below to install the GetX package.
flutter pub add get
Next, let’s see how to get the platform or device info with GetX in Flutter.
Platform info
If you use GetX, you can check the platform info like the below.
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia
Also, you can check which environment is running on mobile, desktop, or web for the app.
GetPlatform.isMobile
GetPlatform.isDesktop
GetPlatform.isWeb
Device size
You can get the device size like the below with GetX.
Get.height
Get.width
Context usages
You can get the screen size or rotation by using the context. You can get the current context with GetX like the below.
Get.context
Also, when you use the full screen widget like Dialog or BottomSheet, you can get the context of them like the below.
Get.contextOverlay
Screen info
After getting the context, you can use it to get the screen size or pixel info like the below.
context.width
context.height
context.widthTransformer()
context.heightTransformer()
context.mediaQuerySize
context.mediaQueryPadding
context.mediaQueryViewPadding
context.mediaQueryViewInsets
context.devicePixelRatio
Screen rotation
You can check the rotation of the screen like the below.
context.orientation
context.isLandscape
context.isPortrait
Text scale
You can get the scale of the text that the user configured like the below.
context.textScaleFactor
Device info
You can get the device info like the below.
context.isPhone
context.isSmallTablet
context.isLargeTablet
context.isTablet
Check
To check these, open the lib/mian.dart file and modify it like the below.
// ignore_for_file: avoid_print
...
class _MyHomePageState extends State<MyHomePage> {
...
@override
Widget build(BuildContext context) {
print('Check OS ==========================================');
print('isAndroid: ${GetPlatform.isAndroid}');
print('isIOS: ${GetPlatform.isIOS}');
print('isMacOS: ${GetPlatform.isMacOS}');
print('isWindows: ${GetPlatform.isWindows}');
print('isLinux: ${GetPlatform.isLinux}');
print('isFuchsia: ${GetPlatform.isFuchsia}');
print('Check Platform ==========================================');
print('isMobile: ${GetPlatform.isMobile}');
print('isDesktop: ${GetPlatform.isDesktop}');
print('isWeb: ${GetPlatform.isWeb}');
print('Width/Height ==========================================');
print('width: ${Get.width}');
print('height: ${Get.height}');
print('Context ==========================================');
final context = Get.context!;
// final context = Get.contextOverlay!;
print('context width: ${context.width}');
print('context height: ${context.height}');
print('context widthTransformer: ${context.widthTransformer()}');
print('context heightTransformer: ${context.heightTransformer()}');
print('context mediaQuerySize: ${context.mediaQuerySize}');
print('context mediaQueryPadding: ${context.mediaQueryPadding}');
print('context mediaQueryViewPadding: ${context.mediaQueryViewPadding}');
print('context mediaQueryViewInsets: ${context.mediaQueryViewInsets}');
print('context devicePixelRatio: ${context.devicePixelRatio}');
print('context orientation: ${context.orientation}');
print('context isLandscape: ${context.isLandscape}');
print('context isPortrait: ${context.isPortrait}');
print('context textScaleFactor: ${context.textScaleFactor}');
print('context isPhone: ${context.isPhone}');
print('context isSmallTablet: ${context.isSmallTablet}');
print('context isLargeTablet: ${context.isLargeTablet}');
print('context isTablet: ${context.isTablet}');
...
}
}
When you execute the above code, you can see the following results.
flutter: isFuchsia: false
flutter: Check Platform ==========================================
flutter: isMobile: true
flutter: isDesktop: false
flutter: isWeb: false
flutter: Width/Height ==========================================
flutter: width: 428.0
flutter: height: 926.0
flutter: Context ==========================================
flutter: context width: 428.0
flutter: context height: 926.0
flutter: context widthTransformer: 428.0
flutter: context heightTransformer: 926.0
flutter: context mediaQuerySize: Size(428.0, 926.0)
flutter: context mediaQueryPadding: EdgeInsets(0.0, 47.0, 0.0, 34.0)
flutter: context mediaQueryViewPadding: EdgeInsets(0.0, 47.0, 0.0, 34.0)
flutter: context mediaQueryViewInsets: EdgeInsets.zero
flutter: context devicePixelRatio: 3.0
flutter: context orientation: Orientation.portrait
flutter: context isLandscape: false
flutter: context isPortrait: true
flutter: context textScaleFactor: 1.0
flutter: context isPhone: true
flutter: context isSmallTablet: false
flutter: context isLargeTablet: false
flutter: context isTablet: false
Completed
Done! we’ve seen how to use GetX to get the device info or platform info in Flutter. If you only use the info that GetX provides, you don’t need to install other packages, so it’s quite convenient.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
