[Flutter] GetX - 다국어적용

 개요

GetX Translations

GetX에서는 다국어를 지원하는 기능을 제공한다. Flutter에서 다양한 방식으로 다국어를 정의해서 사용할 수 있지만 Android 또는 iOS 별도의 프로젝트 설정 없이 GetX 라이브러리만 사용하여 모두 적용 가능한 것이 장점이며 적용 방식이 매우 간단하므로 다국어 설정을 고려한다면 GetX의 Translations 기능을 사용해보는 것이 좋다고 생각이 든다.

 

 본문

GetX 설치

flutter pub add get

프로젝트 터미널에서 flutter pub add get 명령어를 실행하여 pubspec.yaml에 디펜던시를 추가한다.

Translations class 생성

import 'package:get/get.dart';

class Languages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
    'ko_KR' : {
      'title' : '제목'
    },
    'en_US' : {
      'title' : 'title'
    },
    'ja_JP' : {
      'title' : '題名'
    },
    'vi_VN' : {
      'title' : 'Tiêu đề'
    },
  };
}

• Translations를 상속받은 클래스를 생성하면 keys를 오버라이드 해야 한다.
• <'국가코드' <'text key', 'text value'>> 구조로 각 언어별로 작성한다.

Translations 설정

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      translations: Languages(),
      locale: Get.deviceLocale,
      fallbackLocale: const Locale('en', 'US'),
      home: const LanguagesPage(),
    );
  }
}

• translations : Languages() - 위에서 생성했던 Translations 클래스를 설정한다.
• locale : Get.deviceLocale - 디바이스 언어로 표시 언어를 설정한다.
• fallbackLocale은 Loanguages 클래스에서 정의되지 않는 언어가 설정되면 기본값으로 표시할 언어를 설정한다. (예제는 영어를 기본으로 설정했다.)

translations, locale, fallbackLocale 3가지 옵션만 설정하면 다국어 설정은 모두 마쳤다.

Translations 사용

class _LanguagesPageState extends State<LanguagesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'title'.tr,
              style: TextStyle(fontSize: 30, color: Colors.black)
            ),
          ],
        ),
      ),
    );
  }

• 'title'.tr : 다국어를 표시할 때는 Languages 클래스에 정의했던 Key 이름 뒤에 .tr을 사용한다.
• 만약 중간에 다국어 설정 값을 변경하고 싶을 경우에는 

Get.updateLocale(const Locale('ko', 'KR'))

• Get.updateLocale 메서드로 Locale 언어 설정을 선언하면 언어가 변경된다. 다국어 언어 설정이 엄청 간단하고 쉽다.

getx translations

 

 마무리

GetX Translations로 다국어 설정을 Flutter 프로젝트에서만 한다는 것이 가장 맘에 들고 설정과 사용법이 정말 간단해서 더욱더 마음에 든다. 다만 Map 형태로 모든 언어가 메모리에 올라가기 때문에 이것이 단점이라 할 수 있겠다.