[flutter] 다국어 지원과 로캘 (Locale) 설정하기

Flutter는 국제화와 다국어 지원을 용이하게 제공하는 도구입니다. 애플리케이션에서 여러 언어로 텍스트를 표시하거나 날짜와 시간 형식을 다국어로 변경하는 등의 작업을 할 수 있습니다. 이를 가능하게 하는 주요 개념 중 하나는 로캘(Locale)입니다.

로캘은 사용자의 지역과 언어를 나타내는 식별자입니다. 예를 들어, “ko_KR”은 한국어를 사용하는 대한민국 지역을 나타내며, “en_US”는 영어를 사용하는 미국 지역을 나타냅니다.

다국어 리소스 파일 생성하기

먼저, 다국어를 지원하기 위해 애플리케이션에 사용할 각 언어별 리소스 파일을 생성해야 합니다. 이 리소스 파일에는 해당 언어로 표시될 텍스트 및 다국어 관련 설정이 포함됩니다.

예를 들어, 한국어와 영어로 텍스트를 표시하는 경우 ko_KR.jsonen_US.json과 같은 리소스 파일을 생성할 수 있습니다. 이 파일들에는 각 언어로 표시될 텍스트와 형식 지정 패턴들을 지정합니다.

로캘 설정하기

앱의 초기화 단계에서 로캘을 설정해야 합니다. Flutter에서는 LocalizationsDelegateMaterialApp을 사용하여 로캘을 설정할 수 있습니다.

먼저, LocalizationsDelegate 클래스를 상속한 사용자 정의 클래스를 생성합니다. 이 클래스에서는 로캘별 리소스 파일을 로드하고 반환하는 로직을 구현합니다.

class MyAppLocalizationsDelegate extends LocalizationsDelegate<MyAppLocalizations> {
  const MyAppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'ko'].contains(locale.languageCode);
  }

  @override
  Future<MyAppLocalizations> load(Locale locale) async {
    MyAppLocalizations localizations = MyAppLocalizations(locale);
    await localizations.load();
    return localizations;
  }
  
  @override
  bool shouldReload(MyAppLocalizationsDelegate old) => false;
}

그다음, MaterialApp 위젯의 localizationsDelegates 속성에 위에서 생성한 로캘 델리게이트를 등록합니다. 이렇게하면 Flutter 애플리케이션은 사용자의 기기 설정에 따라 적절한 로캘을 선택하고 해당 언어로 텍스트를 표시할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        MyAppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('ko', 'KR'),
      ],
      title: 'My App',
      home: MyHomePage(),
    );
  }
}

문자열 가져오기

이제 MyAppLocalizations 클래스에서 로드한 리소스 파일에서 해당 언어로 표시할 문자열을 가져올 수 있습니다. 예를 들어, “Welcome”이라는 문자열을 가져오려면 다음과 같이 작성합니다.

class MyAppLocalizations {
  final Locale locale;

  MyAppLocalizations(this.locale);

  static MyAppLocalizations of(BuildContext context) {
    return Localizations.of<MyAppLocalizations>(context, MyAppLocalizations);
  }

  String get welcome {
    switch (locale.languageCode) {
      case 'ko':
        return '환영합니다';
      case 'en':
      default:
        return 'Welcome';
    }
  }
}

이제 MyAppLocalizations.of(context).welcome와 같이 해당 문자열을 사용할 수 있습니다. 앱에서 다국어를 지원하려면, 각 텍스트를 해당 언어의 문자열로 교체하고 적절한 리소스 파일을 만들어야 합니다.

이와 같이 Flutter에서 다국어 지원과 로캘 설정을 구현할 수 있습니다. 로캘에 따라 앱의 언어를 변경하여 사용자에게 좀 더 사용하기 편리한 경험을 제공할 수 있습니다.

참고 자료