플러터 앱에 다국어화(Localization) 설정하기

플러터 앱에 easy_localization 패키지를 사용하여 다국어화를 지원하도록 설정해 보겠습니다.

easy_localization 패키지를 선택한 이유는 아래 이유 때문이고요.😆 

 

 

공식문서참조: https://pub.dev/packages/easy_localization

easy_localization | Flutter package

 

 

 

1. easy_localization 설치

우선 터미널에 명령어를 이용하여 easy_localization 패키지를 설치합니다.

flutter pub add easy_localization

pubspec.yaml

 

pubspec.yaml의 플러그인 마지막 부분에 잘 들어갔습니다.

확인한 김에 assets도 설정해 줍니다.

assets은 이미지, 폰트, 번역파일, 음성 등 앱에서 사용할 데이터를 모아둔 폴더입니다.

assets/translations/ 폴더에는 언어별 텍스트 번역 파일을 넣어줄 거예요.

 

그리고 번역 파일은 아래와 같은 규칙으로 만들어주어야 합니다.

assets
└── translations
    ├── {languageCode}.{ext}                  //only language code
    └── {languageCode}-{countryCode}.{ext}    //or full locale code

 

저는 한국어와 영어를 설정하기 위해 2개의 파일을 아래와 같이 생성했어요.

 

 

 

2. json 번역 파일 작성

간단하게 자주 사용하는 사용법만 예제로 넣어보았습니다.

둘 다 json 구조는 동일하게 하되, value 부분을 각 언어에 맞게 수정해 주시면 됩니다.

 

1) en-US.json

{
    "settings" : "Setting",
    "hello" : "Hello, {}!",
    "app_named":"This is a {name} App!",
    "msg" : "{} are written in the {} language",
    "gender":{
        "male":"Hi man ;) {}",
        "female":"Hello girl :) {}",
        "other":"Hello {}"
     }
}

2) ko-KR.json

{
    "settings" : "설정",
    "hello" : "안녕하세요, {}!",
    "app_named" : "이것은 {name} 앱입니다",
    "msg" : "{}는 {} 언어로 작성되었습니다.",
    "gender":{
        "male":"헤이 맨!;) {}",
        "female":"헤이 걸! :) {}",
        "other":"안녕하세요! {}"
     }
}

 

 

 

3. 플러터 코드 반영

반영된 전체 코드를 간단하게 첨부합니다.

(이전 글에서 파이어베이스를 연동했던 프로젝트에 추가를 했기 때문에 파이어베이스 코드가 보입니다. 참고해주세요.)

import 'package:easy_localization/easy_localization.dart'; //수정
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  await EasyLocalization.ensureInitialized(); //추가. 다국어화 패키지 초기화

  runApp(
    EasyLocalization( //추가
      supportedLocales: const [Locale('en', 'US'), Locale('ko', 'KR')],
      path: 'assets/translations',
      fallbackLocale:
          const Locale('en', 'US'), //앱에서 지원하지 않는 언어를 사용하는 사용자는 영어를 사용.
      child: const TimerApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: context.localizationDelegates, //추가
      supportedLocales: context.supportedLocales, //추가
      locale: context.locale, //추가
      home: Scaffold(
        appBar: AppBar(
          title: Text('타이머앱'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              //텍스트 번역 사용법
              Text('settings').tr(),
              Text('hello').tr(args: ['Zzingong Blog']),
              Text('app_named').tr(namedArgs: {'name': 'Timer App'}),
              Text('msg').tr(args: ['Timer App', 'Dart']),
              Text('gender').tr(gender: 'female', args: ['test']),
              Text('gender.male').tr(args: ['man']),
              Text('gender.female').tr(args: ['girl']),
              Text('gender.other').tr(args: ['other']),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

json 파일에 작성된 키 값을 이용하여 tr()를 호출합니다.

tr 함수에 인자로 args (리스트), 나 namedArgs(맵)을 넘겨줄 수 있어요.

args는 리스트에 입력된 순서대로 해당 키의 값의 { } 부분이 채워지게 되고,

namedArgs는 키와 값을 입력하면 {키} 부분에 값이 대체가 됩니다.

Text('settings').tr(),
Text('hello').tr(args: ['Zzingong Blog']),
Text('app_named').tr(namedArgs: {'name': 'Timer App'}),
Text('msg').tr(args: ['Timer App', 'Dart']),
Text('gender').tr(gender: 'female', args: ['test']),
Text('gender.male').tr(args: ['man']),
Text('gender.female').tr(args: ['girl']),
Text('gender.other').tr(args: ['other']),

 

 

인자 설명은 공식문서에서 발췌했습니다.

Arguments:

NameTypeDescription

args	List<String>	List of localized strings. Replaces {} left to right
namedArgs	Map<String, String>	Map of localized strings. Replaces the name keys {key_name} according to its name
gender	String	Gender switcher. Changes the localized string based on gender string

 

 

ios 시뮬레이터 언어를 한국어로 설정을 해놓았기 때문에 한국어로 출력

 

 

많이 사용하는 것만 정리해 보았는데,

공식문서에는 복수명사 형태도 나라별로 표기할 수 있도록 하는 기능도 있으니 참고해 주세요.

여러 다른 파일의 위젯에서 사용할 때는 파일 상단에 import를 추가해 주시고, tr()을 호출하시면 됩니다. 😀