[flutter] 플러터 intl을 사용해서 앱에서 다국어 약어를 어떻게 처리해야 하나요?

04 Dec 2023

flutter

플러터는 앱 개발에 매우 유용한 크로스 플랫폼 프레임워크입니다. 다국어 지원은 국제화(i18n)와 관련하여 매우 중요한 요소입니다. 이를 위해 플러터에서는 intl 패키지를 제공하고 있습니다.

intl 패키지를 사용하면 앱에서 다국어 약어를 처리하는 것이 매우 간단해집니다. 아래는 intl 패키지를 통해 다국어 약어를 처리하는 예시입니다.

먼저, pubspec.yaml 파일에 다음과 같이 intl 패키지를 추가합니다.

dependencies:
  flutter_localizations:
    sdk: flutter
    
dev_dependencies:
  intl: ^0.17.0

그리고 다국어 지원을 위한 언어 파일을 준비합니다. 예를 들어, 한국어와 영어를 지원하고 싶다면, intl_messages라는 디렉토리를 생성하고 그 안에 ko.arb와 en.arb 파일을 생성합니다.

ko.arb 파일 내용 예시:

{
  "@@locale": "ko",
  "app_title": "앱 제목",
  "hello": "안녕하세요"
}

en.arb 파일 내용 예시:

{
  "@@locale": "en",
  "app_title": "App Title",
  "hello": "Hello"
}

이제, 플러터 코드에서 intl 패키지를 사용하여 앱 내에서 약어를 처리할 수 있습니다. 예를 들어, 앱의 제목을 약어에 따라 표시하는 코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'package:intl/message_lookup_by_library.dart';
import 'package:intl/intl_standalone.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final Locale localeName = Locale(name);
    final String localePath =
        'intl_messages/$name'; // intl_messages 디렉토리에 언어 파일을 저장한 경우

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

  static final AppLocalizationsDelegate delegate = AppLocalizationsDelegate();

  String get appTitle {
    return Intl.message(
      'app_title',
      name: 'appTitle',
      desc: 'App title',
    );
  }

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

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

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

  @override
  Future<AppLocalizations> load(Locale locale) {
    return AppLocalizations.load(locale);
  }

  @override
  bool shouldReload(covariant LocalizationsDelegate<AppLocalizations> old) =>
      false;
}

void main() {
  runApp(
    MaterialApp(
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('ko', 'KR'),
        const Locale('en', 'US'),
      ],
      onGenerateTitle: (BuildContext context) =>
          AppLocalizations.of(context).appTitle,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).appTitle),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).hello),
      ),
    );
  }
}

이와 같이 intl 패키지를 사용하여 앱에서 다국어 약어를 처리할 수 있습니다. 앱을 실행하고 언어를 변경하면 해당 언어에 따라 약어가 자동으로 업데이트됩니다.

추가적인 intl 패키지의 사용 방법과 기능에 대해서는 공식 문서를 참조하시기 바랍니다.