[flutter] 플러터 intl을 사용해서 어떻게 다국어 앱을 개발할 수 있을까요?

04 Dec 2023

flutter

앱을 다국어로 제공하는 것은 사용자들에게 더 좋은 경험을 제공하는 중요한 요소입니다. Flutter에서는 intl 패키지를 사용하여 앱을 다국어로 개발할 수 있습니다. 이 패키지를 사용하면 앱에 포함된 텍스트를 번역하고 다국어 지원을 손쉽게 할 수 있습니다. 이제 intl 패키지를 사용하여 다국어 앱을 개발하는 방법을 알아보겠습니다.

1. intl 패키지 추가하기

먼저, pubspec.yaml 파일을 열고 dependencies 섹션에 intl 패키지를 추가해야 합니다. 아래의 코드를 추가하고, flutter packages get 명령을 실행하여 패키지를 가져옵니다.

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter

  intl: ^0.16.1

2. 다국어 번역 파일 작성하기

intl 패키지를 사용하여 다국어 앱을 개발하기 위해서는 번역 정보가 포함된 파일이 필요합니다. 앱의 다국어 지원을 위해 lib/l10n.dart 파일을 만들고 아래의 예시 코드를 추가합니다.

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

import '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',
    );
  }
}

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

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

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

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

3. 번역 메세지 정의하기

lib/l10n.dart 파일이 준비되면, 번역할 메세지를 정의해야 합니다. 이를 위해 messages_all.dart 파일을 만들고 아래의 예시 코드를 추가합니다.

import 'package:intl/message_lookup_by_library.dart';

import 'package:intl/src/intl_helpers.dart';

final messages = MessageLookup();

class MessageLookup extends MessageLookupByLibrary {
  @override
  String get localeName => 'en';

  @override
  Future initializeMessages(String localeName) {
    initializeInternalMessageLookup(() => Future<LookupByLibrary> {
      if (localeName == 'en') {  // 영어
        return findExact(localeName);
      } else {  // 한국어
        return findExactWithLocales(localeName);
      }
    });
    return null;
  }

  @override
  String get hello => 'Hello';

}

List<dynamic> initializeMessagesLookup() {
  return [
    messages,
  ];
}

4. 앱에서 다국어 적용하기

이제 다국어를 적용하고자 하는 위젯에서 MaterialApp 위젯을 감싸고 localizationsDelegates와 supportedLocales 프로퍼티를 설정합니다. 아래의 코드는 예시로 한국어와 영어를 지원하는 앱을 개발하는 방법을 보여줍니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'l10n.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ko', ''),
      ],
      title: 'Flutter Localization Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.hello),
      ),
      body: Center(
        child: Text(localizations.hello),
      ),
    );
  }
}

위의 코드에서 AppLocalizationsDelegate()은 앞서 작성한 번역 파일인 l10n.dart를 설정하고, supportedLocales에서는 앱에서 지원하는 언어를 설정합니다. MyHomePage에서는 AppLocalizations.of(context)을 통해 번역 메세지를 가져올 수 있습니다.

이제 앱을 실행하면 번역된 텍스트와 앱의 다국어 지원이 적용된 것을 확인할 수 있습니다.

이렇게 Flutter에서 intl 패키지를 사용하여 다국어 앱을 개발하는 방법을 알아보았습니다. 개발하는 앱에 맞게 추가적인 번역 작업과 다국어 지원 설정을 할 수 있습니다.