[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