Flutter 앱에서 `intl` 패키지 없이 글로벌화(Localization) 구현하기

Flutter에서 글로벌화는 필수적인 요소입니다. 일반적으로 intl 패키지를 사용하지만, 이를 사용하지 않고도 글로벌화를 구현할 수 있습니다. 이번 포스트에서는 intl 패키지 없이 글로벌화를 구현하는 방법을 간결하게 설명하겠습니다.

왜 intl 없이 글로벌화를 구현할까?

• 커스텀 요구 사항: intl 패키지의 기능이 필요 이상일 경우.
• 경량화: 프로젝트를 더 가볍게 유지하고 싶을 경우.
• 더 나은 제어: 로컬화 로직을 세밀하게 제어하고 싶을 경우.

단계별 구현 방법

1. 로컬화 파일 준비

각 언어별로 JSON 파일을 준비합니다. 예를 들어, assets/l10n 디렉토리에 en.json과 ko.json 파일을 생성합니다.

// assets/l10n/en.json
{
"title": "Hello",
"message": "Welcome to our app!"
}
// assets/l10n/ko.json
{
"title": "안녕하세요",
"message": "우리 앱에 오신 것을 환영합니다!"
}

2. pubspec.yaml 설정

pubspec.yaml 파일에 JSON 파일을 포함시키도록 설정합니다.

flutter:
assets:
- assets/l10n/en.json
- assets/l10n/ko.json

3. 로컬화 클래스 생성

JSON 파일을 로드하고, 현재 언어에 맞는 번역 문자열을 제공하는 클래스를 만듭니다.

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

class AppLocalizations {
final Locale locale;
late Map<String, String> _localizedStrings;

AppLocalizations(this.locale);

Future<bool> load() async {
String jsonString = await rootBundle.loadString('assets/l10n/${locale.languageCode}.json');
Map<String, dynamic> jsonMap = json.decode(jsonString);

_localizedStrings = jsonMap.map((key, value) {
return MapEntry(key, value.toString());
});

return true;
}

String translate(String key) {
return _localizedStrings[key] ?? key;
}

static const LocalizationsDelegate<AppLocalizations> delegate = _AppLocalizationsDelegate();
}

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 = AppLocalizations(locale);
await localizations.load();
return localizations;
}

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

4. 확장 메서드로 쉽게 접근하기

BuildContext에 확장 메서드를 추가하여 로컬화 문자열에 쉽게 접근할 수 있도록 합니다.

import 'package:flutter/widgets.dart';

extension LocalizationExtension on BuildContext {
AppLocalizations get localizations {
return Localizations.of<AppLocalizations>(this, AppLocalizations)!;
}
}

5. MaterialApp 설정

MaterialApp 위젯에 로컬화 지원을 설정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'app_localizations.dart';
import 'localizations_extension.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', ''),
],
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(context.localizations.translate('title')),
),
body: Center(
child: Text(context.localizations.translate('message')),
),
);
}
}

결론

이제 intl 패키지 없이도 Flutter 앱에서 글로벌화를 구현할 수 있습니다. 위 방법을 사용하면 프로젝트를 더 가볍게 유지하면서도 커스텀 요구 사항을 충족시킬 수 있습니다. 필요에 맞게 확장하고 개선하여 사용해 보세요.