[GetX] 플랫폼 및 디바이스 정보

개요

이번 블로그 포스트에서는 GetX를 사용하여 플랫폼과 디바이스 정보를 사용하는 방법에 대해서 알아보도록 하겠습니다. 이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/getx/utils

블로그 시리즈

이 블로그 포스트는 Flutter에서 GetX를 사용하는 방법에 관해 시리즈로 제작되었습니다. GetX의 다른 사용법을 알고 싶으시다면, 다음 링크를 참고하시기 바랍니다.

GetX 설치

Flutter에서 GetX의 사용법을 확인하기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

flutter create utils

그런 다음 명령어를 실행하여 GetX 패키지를 설치합니다.

flutter pub add get

이제 이렇게 설치한 GetX를 사용하여 플랫폼과 디바이스 정보를 사용하는 방법에 대해서 알아보도록 하겠습니다.

플랫폼 정보

GetX를 사용하면 다음과 같이 플랫폼 정보를 확인할 수 있습니다.

GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia

또한 실행되고 있는 환경이 모바일, 데스크톱, 웹을 다음과 같이 확인할 수 있습니다.

GetPlatform.isMobile
GetPlatform.isDesktop
GetPlatform.isWeb

디바이스 사이즈

GetX를 사용하여 다음과 같이 디바이스의 사이즈를 확인할 수 있습니다.

Get.height
Get.width

컨텍스트 활용

컨텍스트를 활용하면 해당 컨텍스트의 화면 사이즈 정보와 방향 등의 정보를 알 수 있습니다. GetX를 사용하여 다음과 같이 현재 컨텍스트를 사용할 수 있습니다.

Get.context

또는 화면에 Dialog나 BottomSheet와 같이 전체 화면을 덮는 위젯을 사용하는 경우, 다음과 같이 해당 위젯의 컨텍스트를 사용할 수 있습니다.

Get.contextOverlay

화면 정보

이렇게 가져온 컨텍스트를 활용하여 다음과 같이 화면의 크기와 픽셀 정보 등을 확인할 수 있습니다.

context.width
context.height

context.widthTransformer()
context.heightTransformer()

context.mediaQuerySize
context.mediaQueryPadding
context.mediaQueryViewPadding
context.mediaQueryViewInsets

context.devicePixelRatio

화면 방향

다음과 같이 현재 화면의 방향을 확인할 수 있습니다.

context.orientation
context.isLandscape
context.isPortrait

글자 크기

다음과 같이 사용자가 설정한 글자 크기를 확인할 수 있습니다.

context.textScaleFactor

디바이스 정보

다음과 같이 앱이 실행되고 있는 디바이스가 모바일인지 태블릿인지 확인할 수 있습니다.

context.isPhone
context.isSmallTablet
context.isLargeTablet
context.isTablet

확인

이를 확인하기 위해 lib/main.dart 파일을 다음과 같이 수정합니다.

// 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}');
    ...
  }
}

이를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

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