easy_localization으로 Flutter 앱 다국어 처리하기

다국어 처리

flutter에서는 다국어 처리를 할때, easy_localization을 많이 사용합니다.

 

easy_localization

flutter cli를 이용하여 easy_localization 의존성을 추가합니다.

flutter pub add easy_localization

 

추가한 뒤에, 다국어 번역이된 json 파일을 관리할 디렉토리를 생성합니다. 위치는 크게 중요하지 않습니다. 보통 assets 하위에 리소스를 많이 보관합니다.

 

본 글에서는 번역 json 파일도 assets/translations 하위에 생성했습니다. 그리고, 영어와 인도네시아 번역 처리가 필요하여 id-ID.json 과 en-US.json 을 생성했습니다.

assets
└── translations
    ├── id-ID.json
    └── en-US.json 

 

pubspec.yaml 파일에 assets 속성에 resource 위치를 설정해줘야 앱 내에서 불러올 수 있습니다.

  assets:
    - assets/translations/

 

앱 실행 전에 초기화를 하는 코드를 다음과 같이 작성합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('id', 'ID')],
      path: 'assets/translations', // 다국어 처리 파일이 위치한 곳 경로를 입력
      fallbackLocale: Locale('en', 'US'),
      child: MyApp()
    ),
  );
}

 

위젯에서 번역 처리 하기

번역 내용을 다음 코드와 같이 작성합니다. key 값을 코드값 형태로 하기도 하는데, 저는 개발하면서 find하거나 내용을 이해할때 한글이 더 편해서 키 값을 한글로 하는 편입니다.

// id-ID.json
{
  "시작하기": "Mulai",
  "아직 계정이 없나요?": "Belum memiliki akun?"
}

 

이후 MaterialApp 위젯에 다음과 같이 localizationsDelegates, supportedLocales와 locale 값을 설정합니다.

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

• localizationsDelegates: 앱의 특정 부분에 대한 번역이나 형식 설정을 담당하는 객체
• supportedLocales: 앱이 지원하는 locale(언어 및 지역 설정)의 목록
• locale: 현재 사용하고 있는 locale 정보

 

위와 같이 작성한 뒤, Text 위젯을 작성합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('시작하기'.tr()),
    Text('아직 계정이 없나요?'.tr()),
  ],
)

 

번역 처리되어 노출 됨

Reference

easy_localization install | Flutter package