[GetX] Platform and device info

2022-01-24 hit count image

Let's see how to get the platform or devicec info with GetX in Flutter.

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 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!

Posts