플러터는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 다국어 지원은 매우 중요한 기능 중 하나입니다. 앱의 사용자는 다양한 언어를 사용하므로, 앱 내의 텍스트 및 구성 요소들을 언어에 맞게 표시할 수 있어야 합니다.
다국어 지원을 위한 패키지 추가하기
먼저, 다국어 지원을 위해 flutter_localizations 패키지를 프로젝트에 추가해야 합니다. 이 패키지는 앱의 지역 설정에 따라 해당 언어의 번역 파일을 선택하고, 텍스트를 로컬라이징하는 기능을 제공합니다.
pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
의존성을 추가한 후, 패키지를 가져올 수 있도록 main.dart 파일에 다음과 같이 import 문을 추가합니다:
import 'package:flutter_localizations/flutter_localizations.dart';
번역 파일 작성하기
이제 번역 파일을 작성해야 합니다. lib 폴더에 l10n 폴더를 생성하고, intl 패키지를 사용해서 번역 파일을 생성합니다.
명령 프롬프트 또는 터미널에서 다음 명령어를 실행하여 intl 패키지를 설치합니다:
flutter pub global activate intl_translation
번역 파일 생성을 위해 l10n 폴더로 이동한 다음, 다음 명령어를 실행합니다:
flutter pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/localizations.dart
위 명령어를 실행하면 앱에서 사용되는 문자열이 추출되어 lib/l10n/intl_messages.arb 파일이 생성됩니다.
이제 생성된 intl_messages.arb 파일을 기반으로 각 언어의 번역 파일을 생성합니다.
예를 들어, 한국어와 영어를 지원하려면 다음과 같은 파일을 생성할 수 있습니다:
intl_messages_ko.arb(한국어 번역 파일)intl_messages_en.arb(영어 번역 파일)
각 번역 파일에는 키-값 쌍으로 번역할 문자열을 입력해야 합니다.
번역 파일 사용하기
이제 번역 파일을 사용하여 앱 내에서 다국어 지원을 할 수 있습니다. l10n 폴더에 messages.dart 파일을 생성하고, 다음과 같은 코드를 입력합니다:
import 'package:flutter/material.dart';
import 'package:intl/intl.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 checkboxText {
return Intl.message(
'Check Me',
name: 'checkboxText',
);
}
}
// 번역 메시지를 위해 코드를 생성하는 함수
// flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/l10n/intl_messages_en.arb lib/l10n/intl_messages_ko.arb lib/l10n/messages.dart
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await initializeMessages('en');
await initializeMessages('ko');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
// 번역을 적용하기 위한 델리게이트 추가
AppLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
// 지원할 언어 설정
Locale('en', ''),
Locale('ko', ''),
],
home: MyHomePage(),
);
}
}
class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
const AppLocalizationsDelegate();
@override
bool isSupported(Locale locale) {
// 지원할 언어 체크
return ['en', 'ko'].contains(locale.languageCode);
}
@override
Future<AppLocalizations> load(Locale locale) async {
// 언어에 맞는 번역 파일 로드
return AppLocalizations.load(locale);
}
@override
bool shouldReload(AppLocalizationsDelegate old) => false;
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context).checkboxText),
),
body: Checkbox(
value: true,
onChanged: (bool newValue) {},
),
);
}
}
위 코드에서 AppLocalizations 클래스는 번역 메시지를 로컬라이징하고, messages.dart 파일은 번역 메시지를 위해 생성된 코드를 포함하고 있습니다.
MyApp 위젯에서 localizationsDelegates에 AppLocalizationsDelegate를 추가하여 번역을 적용하고, supportedLocales에 언어를 설정합니다.
마지막으로, MyHomePage 위젯에서 AppLocalizations.of(context).checkboxText를 통해 번역된 문자열을 사용할 수 있습니다.
이제 앱 내에서 Checkbox에 대한 다국어 지원이 완료되었습니다. 지원되는 다른 언어를 추가하려면, 해당 언어에 대한 번역 파일을 생성하고 supportedLocales에 추가하기만 하면 됩니다.
플러터를 사용하여 다국어 지원을 구현하는 방법에 대해 알아보았습니다. 앱의 사용자들의 다양한 언어 요구에 적극적으로 대응하여 사용성과 사용자 경험을 향상시킬 수 있습니다.