[Flutter] GetX ⑥ - Utils (기기 정보, 다국어 지원)

get | Flutter Package

 

설정

pubspec.yaml

dependencies:
  get: ^4.6.5

 

main.dart

• MaterialApp 을 GetMaterialApp 으로 변경해주세요.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  	
    // MaterialApp 을 GetMaterialApp 으로 변경
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SampleScreen(),
    );
  }
}

 

 

 

기기 정보

platform

• 현재 기기가 어떤 기기인지 bool 값으로 리턴합니다.
• GetX 의 platform 이 사용된다면 사용환경을 확인하는 isMobile, isDesktop, isWeb 만 쓰일 것 같습니다.
• 왜냐하면 OS 확인은 dart:io 의 Platform 으로 확인 가능하기 때문입니다.

// 사용환경
GetPlatform.isMobile
GetPlatform.isDesktop
GetPlatform.isWeb

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

 

화면 정보

• Get. 으로 확인 하는 방법도 있지만 Get.context 로 context 값을 얻어서 context 로 화면의 정보를 찾는 방법도 있습니다.

Get.height
Get.width
.
.
/////////////////

final context = Get.context!;

// 화면 정보
context.width
context.height
context.heightTransformer()
context.widthTransformer()
context.mediaQuerySize()
context.mediaQueryPadding()
context.mediaQueryViewPadding()
context.mediaQueryViewInsets()
context.mediaQueryShortestSide()
context.devicePixelRatio()
context.showNavbar()

// 화면 방향
context.orientation()
context.isLandscape()
context.isPortrait()

// 글자 크기
context.textScaleFactor()

// Platform check
context.isPhone()
context.isSmallTablet()
context.isLargeTablet()
context.isTablet()

 

 

 

다국어 지원

• Translations 를 상속하는 class 를 만듭니다.
• keys 에 적절한 언어를 넣어줍니다.

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
    'ko_KR': {
      'hello': '세상아 안녕',
    },
    'en_US': {
      'hello': 'Hello World',
    },
    'de_DE': {
      'hello': 'Hallo Welt',
    }
  };
}

 

 

• GetMaterialApp 에 translations , locale, fallbackLocale 정보를 넣어줍니다.
• translations - Translations 를 상속한 class 를 넣어줍니다. 
• locale - Get.deviceLocale 로 기기에 설정된 언어로 넣어줍니다.
• fallbackLocale - Message class 에 적지 않는 언어가 있으면 설정한 fallbackLocale 언어로 보입니다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      
      // Translations 를 상속한 class 
      translations: Messages(),
      
      // locale 설정 - Get.deviceLocale (기기에 설정한 언어)
      locale: Get.deviceLocale,
      
      // 지원하지 않는 언어일 때 나타납니다. 
      // ex) Messages class 에 적은 언어가 없을 때
      fallbackLocale: const Locale('ko', 'KR'),
      
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home : SampleScreen()
    );
  }
}

 

 

• 설정한 locale 은 Get.updateLocale 로 변경할 수 있습니다.

var locale = Locale('en', 'US');
Get.updateLocale(locale);

 

사용 방법

• 다국어 사용방법은 key값.tr 을 넣어주면 됩니다.

Text('hello'.tr);

 

• 예시처럼 name, email 값을 유동적으로 운용시 key값.trParams 로 넣어줍니다.

Map<String, Map<String, String>> get keys => {
    'en_US': {
        'logged_in': 'logged in as @name with email @email',
    },
    'es_ES': {
       'logged_in': 'iniciado sesión como @name con e-mail @email',
    }
};

Text('logged_in'.trParams({
  'name': 'Jhon',
  'email': 'jhon@example.com'
  }));

 

• 단수 및 복수 사용 예시 입니다.

var products = [];
Text('singularKey'.trPlural('pluralKey', products.length, Args));