[플러터] 32일차 - i18n, l10n 적용하기

본 예제에서는 easy_localization 을 사용합니다.

다른 라이브러리가 arb로 generate 하고 변환한 arb 파일을 사용하는 것에 비해

easy_localization은 지정한 경로에 json만 만들면 되기 때문에 사용이 대단히 편리합니다.

 

 

pubspec.yaml

dependencies:
	easy_localization: ^3.0.0

위와 같이 설정해서 의존성 다운로드를 받습니다.

 

main.dart

void main() async {
    // Needs to be called so that we can await for EasyLocalization.ensureInitialized();
    WidgetsFlutterBinding.ensureInitialized();
    await EasyLocalization.ensureInitialized();

    runApp(EasyLocalization(
      fallbackLocale: Locale('ko', 'KR'),
      child: MyApp(),
      supportedLocales: [Locale('en', 'US'), Locale('ko', 'KR'), Locale('ja', 'JP')],
      path: 'data/translations',
    ));
}

class MyApp extends StatelessWidget {
	@override
  Widget build(BuildContext context) {
    MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      title: 'Flutter Demo',
      initialRoute: '/',
    );
  }
}

main 코드를 위와같이 준비했다면 준비는 모두 끝입니다.

 

 

locale 파일

지원할 언어별로 json 파일을 만들어둬야 합니다.

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

• translations/ko-KR.json

• translations/en-US.json

코드

...
import 'package:easy_localization/easy_localization.dart';
...

...
				Text(
          'home.matchHistory'.tr(),
          style: GoogleFonts.doHyeon(
            color: Colors.white,
            fontSize: 12,
          ),
        )

text에 extenstion 함수 tr()을 호출하면 상응하는 json의 value로 치환이 됩니다.

 

 

언어 변경 화면

class LanguagePreferences extends StatefulWidget {
  static const route = '/preferences/language';

  @override
  State<LanguagePreferences> createState() => _LanguagePreferences();
}


class _LanguagePreferences extends State<LanguagePreferences> {
  @override
  Widget build(BuildContext context) {
    final locale = EasyLocalization.of(context)!.locale.toString();

    return Scaffold(
      body: ListView(
        children: [
          ListTile(
            title: Text('한국어', style: GoogleFonts.jua()),
            trailing: Radio(
              value: 'ko_KR',
              groupValue: locale,
              onChanged: (String? value) {
                context.setLocale(Locale('ko', 'KR'));
              },
            ),
          ),
          ListTile(
            title: Text('English', style: GoogleFonts.jua()),
            trailing: Radio(
              value: 'en_US',
              groupValue: locale,
              onChanged: (String? value) {
                context.setLocale(Locale('en', 'US'));
              },
            ),
          ),
          ListTile(
            title: Text('日本語', style: GoogleFonts.jua()),
            trailing: Radio(
              value: 'ja_JP',
              groupValue: locale,
              onChanged: (String? value) {
                context.setLocale(Locale('ja', 'JP'));
              },
            ),
          ),
        ],
      ),
    );
  }
}

 

종료 후 언어 설정이 초기화 되지는 않을까 염려하지 않으셔도 되겠습니다.

라이브러리 레벨에서 모두 제공이 됩니다.