Get_it은 Dependency Injection(DI)을 쉽게 구현할 수 있는 Flutter 패키지입니다. 이번 글에서는 Get_it을 사용하여 플러터 앱에서 다국어 지원을 구현하는 방법을 알아보겠습니다.
1. 다국어 지원을 위한 패키지 추가하기
다국어 지원을 위해 flutter_localizations 패키지를 사용합니다. pubspec.yaml 파일의 dependencies 섹션에 아래 코드를 추가해주세요.
flutter_localizations:
sdk: flutter
2. 다국어 지원을 위한 리소스 파일 생성하기
lib 폴더 아래에 l10n 폴더를 생성하고, intl_messages.arb와 intl_ko.arb 같은 형식으로 리소스 파일을 생성합니다. 각각의 파일은 해당 언어에 따른 키-값 쌍으로 구성됩니다.
아래는 intl_messages.arb 파일의 예시입니다.
{
"@@locale": "en",
"app_title": "Flutter App",
"hello": "Hello, {name}!",
"welcome": "Welcome!",
"language": "Language"
}
아래는 intl_ko.arb 파일의 예시입니다.
{
"@@locale": "ko",
"app_title": "플러터 앱",
"hello": "안녕하세요, {name}님!",
"welcome": "환영합니다!",
"language": "언어"
}
3. 다국어 지원을 위한 AppLocalizations 클래스 생성하기
l10n 폴더 아래에 app_localizations.dart 파일을 생성하고, 다음 코드를 추가합니다.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'dart:async';
import 'dart:convert';
class AppLocalizations {
final Locale locale;
AppLocalizations(this.locale);
static AppLocalizations of(BuildContext context) {
return Localizations.of<AppLocalizations>(context, AppLocalizations);
}
static const LocalizationsDelegate<AppLocalizations> delegate =
_AppLocalizationsDelegate();
Map<String, String> _localizedStrings;
Future<bool> load() async {
String jsonString =
await rootBundle.loadString('l10n/intl_${locale.languageCode}.arb');
Map<String, dynamic> jsonMap = json.decode(jsonString);
_localizedStrings =
jsonMap.map((key, value) => MapEntry(key, value.toString()));
return true;
}
String translate(String key) {
return _localizedStrings[key];
}
}
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 {
AppLocalizations localizations = new AppLocalizations(locale);
await localizations.load();
return localizations;
}
@override
bool shouldReload(LocalizationsDelegate<AppLocalizations> old) {
return false;
}
}
4. main.dart 파일에서 다국어 지원 설정하기
main.dart 파일을 열고, 다음과 같이 수정합니다.
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/app_localizations.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
Locale('en', ''),
Locale('ko', ''),
],
title: 'Flutter Get_it Localization Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final AppLocalizations appLocalizations = AppLocalizations.of(context);
return Scaffold(
appBar: AppBar(
title: Text(appLocalizations.translate('app_title')),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
appLocalizations.translate('hello', {'name': 'John'}),
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
Text(
appLocalizations.translate('welcome'),
style: TextStyle(fontSize: 18),
),
],
),
),
);
}
}
5. 앱 실행해보기
이제 다국어 지원이 구현된 앱을 실행해볼 수 있습니다. main.dart 파일에서 설정한 app_title, hello 및 welcome 키에 해당하는 값을 리소스 파일에서 가져와서 보여줍니다.
위의 예시에서는 en과 ko 두 가지 언어를 지원하고 있습니다. l10n 폴더에 추가적인 언어의 리소스 파일을 생성하고, supportedLocales에 해당 Locale을 추가하여 다른 언어를 지원할 수도 있습니다.
이렇게 Get_it을 사용하여 다국어 지원을 구현할 수 있습니다. Get_it을 활용하면 앱 내에서 다양한 종속성을 관리할 수 있으므로, 다국어 지원 외에도 다른 기능 구현에도 유용하게 사용할 수 있습니다.