[flutter] 플러터 build_runner에서 다국어 지원 기능 사용하기

26 Dec 2023

flutter

다국어 지원은 모바일 앱을 다양한 언어로 제공하기 위해 중요한 기능입니다. 플러터(Flutter) 앱에서 다국어를 지원하려면 intl 패키지를 사용하여 지원해야 합니다. intl 패키지는 플러터의 build_runner를 사용하여 번역 파일을 생성할 수 있습니다.

1. Intl 패키지 설치하기

다국어 지원을 위해서는 먼저 intl 패키지를 플러터 프로젝트에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  # 다국어 지원을 위한 intl 패키지 추가
  intl: ^0.17.0

프로젝트의 pubspec.yaml 파일에 위와 같이 intl 패키지를 추가합니다.

2. 번역 파일 생성하기

intl 패키지를 추가한 후, 터미널에서 다음 명령을 실행하여 번역 파일을 생성합니다.

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n lib/localizations.dart lib/l10n/intl_*.arb

명령을 실행하면 intl_messages.arb, intl_en.arb 등의 파일이 생성됩니다.

3. 번역 파일 수정하기

생성된 intl_*.arb 파일을 열고, 각 언어에 맞게 번역된 메시지를 추가 또는 수정합니다.

예시:

intl_en.arb

{
  "hello": "Hello",
  "welcome": "Welcome to our app"
}

intl_ko.arb

{
  "hello": "안녕하세요",
  "welcome": "우리 앱에 오신 것을 환영합니다"
}

4. 번역 적용하기

lib/localizations.dart 파일을 열고 다음과 같이 수정합니다.

import 'dart:ui';

import 'package:intl/intl.dart';

import 'l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

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

  String get hello {
    return Intl.message(
      'Hello',
      name: 'hello',
      desc: 'Greeting',
    );
  }

  String get welcome {
    return Intl.message(
      'Welcome to our app',
      name: 'welcome',
      desc: 'Welcome message for the application',
    );
  }
}

lib/main.dart 파일에서 MaterialApp 위젯에 다음과 같이 추가합니다.

MaterialApp(
  localizationsDelegates: [
    AppLocalizationsDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', ''),
    Locale('ko', ''),
  ],
  ...
)

위와 같이 MaterialApp 위젯에 localizationsDelegates 및 supportedLocales를 추가하여 언어를 지원하도록 설정합니다.

5. 다국어 지원 확인

이제 설정한 다국어 기능을 확인하려면 앱을 빌드하고 원하는 언어로 앱을 실행하여 해당 언어로 번역된 텍스트가 제대로 표시되는지 확인할 수 있습니다.

위와 같이 intl 패키지를 활용하여 build_runner를 통해 다국어 지원 기능을 사용하는 방법을 알아보았습니다. 다국어 지원을 통해 사용자가 원하는 언어로 쉽게 변경할 수 있게 해주어야 합니다.

더 자세한 내용은 Intl 패키지 문서를 참고하십시오.