flutter_localizations & intl

Flutter에서 다국어 지원하기: flutter_localizations & intl

Flutter 애플리케이션에서 다국어 지원을 구현하려면 flutter_localizations와 intl 패키지를 사용합니다. flutter_localizations는 Flutter 위젯의 현지화를 지원하는 반면, intl 패키지는 메시지 번역, 날짜 및 숫자 형식 지정 등의 기능을 제공합니다. 또한, Flutter Intl 플러그인을 사용하여 번역 파일 관리를 자동화할 수 있습니다.

주요 특징

flutter_localizations

1. 위젯 현지화:
   • flutter_localizations 패키지는 Flutter의 Material 및 Cupertino 위젯의 텍스트를 현지화합니다. 이 패키지를 사용하면 Flutter 기본 위젯의 텍스트가 사용자의 로케일에 맞게 자동으로 번역됩니다.
2. 다양한 로케일 지원:
   • 여러 로케일을 쉽게 추가하고 관리할 수 있습니다.
3. 플랫폼 독립적:
   • Android와 iOS 모두에서 동일한 방식으로 동작합니다.

intl

1. 메시지 번역:
   • intl 패키지는 메시지를 번역하고, 복수형 및 성별 처리 등의 기능을 제공합니다.
2. 날짜 및 숫자 형식 지정:
   • 각 로케일에 맞는 날짜와 숫자 형식 지정 및 구문 분석을 지원합니다.
3. 다양한 국제화 기능:
   • 다국어 지원을 위한 다양한 기능을 제공합니다.

설치

pubspec.yaml 파일에 flutter_localizations와 intl 패키지를 종속성으로 추가합니다.

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

사용 방법

Flutter 프로젝트 설정

1. 패키지 추가:

   • flutter_localizations와 intl 패키지를 pubspec.yaml 파일에 추가합니다.

2. 로케일 설정:

   • main.dart 파일에서 localizationsDelegates와 supportedLocales를 설정합니다.

   import 'package:flutter/material.dart';
   import 'package:flutter_localizations/flutter_localizations.dart';
   import 'package:house_of_tomorrow/util/lang/generated/l10n.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         localizationsDelegates: [
           S.delegate,
           GlobalMaterialLocalizations.delegate,
           GlobalWidgetsLocalizations.delegate,
           GlobalCupertinoLocalizations.delegate,
         ],
         supportedLocales: S.delegate.supportedLocales,
         home: HomePage(),
       );
     }
   }
   

번역 파일 작성

1. Android Studio Flutter Intl 플러그인 사용:

   • Android Studio에서 Flutter Intl 플러그인을 설치하고, Tools 메뉴에서 Flutter Intl 옵션을 사용하여 초기 설정을 진행합니다.

2. 번역 파일 작성:

   • intl_en.arb:

     {
       "@@locale": "en",
       "title": "Hello World",
       "message": "This is a localized message."
     }
     

   • intl_ko.arb:

     {
       "@@locale": "ko",
       "title": "안녕하세요",
       "message": "이것은 현지화된 메시지입니다."
     }
     

번역된 텍스트 사용

번역된 텍스트를 가져와 UI에서 사용합니다.

import 'package:house_of_tomorrow/util/lang/generated/l10n.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(S.of(context).title),
    ),
    body: Center(
      child: Text(S.of(context).message),
    ),
  );
}

주요 활용도

• UI 텍스트 번역: 애플리케이션의 모든 UI 텍스트를 다양한 언어로 번역하여 다국어 지원을 구현합니다.
• 날짜 및 숫자 형식 지정: 사용자의 로케일에 맞는 날짜 및 숫자 형식으로 데이터를 표시합니다.
• 메시지 현지화: 사용자에게 표시되는 메시지를 현지화하여 사용자가 이해하기 쉽게 만듭니다.

관련 자료

• flutter_localizations library - Dart API
• intl | Dart Package
• Flutter Intl - Visual Studio Marketplace