[flutter] flutter_localizations를 사용한 앱의 다국어 지원 읽기 기능 구현 방법

12 Dec 2023

flutter

다국어 지원은 Flutter 앱을 전 세계 사용자에게 제공하기 위해 중요한 기능입니다. flutter_localizations 패키지를 사용하여 앱에 다국어 지원을 추가할 수 있습니다. 하나의 플랫폼에서 다양한 언어로 앱 사용 경험을 제공할 수 있습니다.

flutter_localizations 패키지

flutter_localizations 패키지는 Flutter에서 지역화를 지원하기 위한 핵심 패키지입니다. 이 패키지를 사용하면 앱의 문자열 및 일부 시스템 메시지를 다양한 언어로 제공할 수 있습니다.

1. flutter_localizations 추가

먼저, flutter_localizations 패키지를 앱에 추가해야 합니다. pubspec.yaml 파일에 다음을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  # 여기에 다른 의존성이 있을 수 있습니다

그런 다음 터미널에서 flutter packages get 명령을 사용하여 패키지를 다운로드 받습니다.

2. MaterialApp에 지역화 델리게이트 추가

다음으로, MaterialApp 위젯에 localizationsDelegates 및 supportedLocales를 추가해야 합니다. 이 부분은 앱의 진입 지점에 해당하는 곳에서 설정됩니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'), // 영어
        const Locale('ko', 'KR'), // 한국어
        // 여기에 다른 언어 코드를 추가할 수 있습니다
      ],
      home: MyHomePage(),
    );
  }
}

3. 다국어 문자열 추가

이제 앱에 사용할 다국어 문자열을 지원해야 합니다. lib 폴더 내에 l10n 폴더를 만들고, 그 아래에 각 언어별로 arb 파일을 만듭니다.

예를 들어, app_localizations_en.arb 파일에는 다음과 같은 형식으로 영어 문자열을 추가합니다:

{
  "title": "Hello World!",
  "welcome": "Welcome to my app"
}

app_localizations_ko.arb 파일에는 한국어에 해당하는 문자열을 추가합니다:

{
  "title": "안녕, 세상!",
  "welcome": "내 앱에 오신 것을 환영합니다"
}

4. AppLocalizations 클래스 생성

다국어 문자열을 로드하는 클래스를 작성해야 합니다. 다국어 지원을 위해 AppLocalizations 클래스를 생성하고, 이 클래스에서 언어별로 문자열을 불러올 수 있도록 합니다.

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

class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  Map<String, String> _localizedStrings;

  Future<bool> load() async {
    String jsonString = await rootBundle.loadString('lib/l10n/app_localizations_${locale.languageCode}.arb');
    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];
  }
}

5. AppLocalizationsDelegate 클래스 생성

어플리케이션에서 사용할 AppLocalizations 클래스의 인스턴스를 생성할 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 = new AppLocalizations(locale);
    await localizations.load();
    return localizations;
  }

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

6. 다국어 문자열 사용

이제 AppLocalizations 클래스를 사용하여 다국어 문자열을 어떻게 사용할지 알아보겠습니다.

Text(AppLocalizations.of(context).translate('title')),
Text(AppLocalizations.of(context).translate('welcome')),

위와 같이 AppLocalizations.of(context).translate('key')로 문자열을 불러올 수 있습니다.

위의 과정을 따라 하면 앱은 지정된 지역에 따라 적절한 언어로 표시됩니다.

이제 flutter_localizations를 사용하여 Flutter 앱에 다국어 지원 읽기 기능을 구현하는 방법에 대해 알아보았습니다. 향후 여러 언어로 앱을 확장하는 데 도움이 되기를 바랍니다.

flutter_localizations 패키지에서 더 많은 정보를 확인할 수 있습니다.

Happy coding! 🌍✨