Flutter의 다국어 지원(Multi-language Support) 설정하기

앱의 글로벌화를 고려할 때, 다국어 지원(Multi-language Support)은 필수적인 요소입니다. Flutter는 강력한 국제화(internationalization, i18n) 기능을 제공하여, 쉽게 여러 언어를 지원할 수 있습니다. 이번 글에서는 Flutter에서 다국어 지원을 설정하고, 앱 내에서 언어를 동적으로 변경하는 방법을 단계별로 설명하겠습니다.

1. intl 패키지 추가

다국어 지원을 위해서는 Flutter에서 intl 패키지를 사용합니다. 이 패키지는 날짜, 시간, 숫자 포맷 등을 로케일(Locale)에 맞게 처리해주는 기능도 함께 제공합니다.

 

1.1 pubspec.yaml 파일 수정

먼저, pubspec.yaml 파일에 intl 패키지를 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

 

flutter_localizations 패키지는 Flutter에서 기본적으로 제공하는 지역화 지원 패키지이며, intl은 문자열과 포맷을 처리하는데 필요한 패키지입니다.

2. 언어 리소스 파일 생성

앱에서 지원하는 여러 언어를 관리하기 위해 각 언어별 리소스 파일을 생성해야 합니다. Flutter에서는 arb 파일을 사용하여 언어별 텍스트를 관리합니다.

 

2.1 lib/l10n 폴더 생성

lib 폴더 안에 l10n 폴더를 생성하고, 여기에서 각 언어의 번역을 관리합니다. 예를 들어, 영어와 한국어를 지원하는 앱을 만들기 위해 intl_en.arb와 intl_ko.arb 파일을 생성합니다.

• intl_en.arb

{
  "hello": "Hello",
  "welcome": "Welcome to our app",
  "@hello": {
    "description": "The greeting message"
  }
}

 

• intl_ko.arb

{
  "hello": "안녕하세요",
  "welcome": "우리 앱에 오신 것을 환영합니다",
  "@hello": {
    "description": "인사 메시지"
  }
}

 

 

반응형

 

3. MaterialApp에 지역화(Localization) 설정

Flutter 앱에서 지역화를 사용하려면 MaterialApp에 지역화 설정을 추가해야 합니다. 이를 통해 앱에서 사용할 언어를 설정하고, 지원하는 언어 목록을 지정합니다.

 

3.1 main.dart 파일 수정

MaterialApp에서 localizationsDelegates, supportedLocales, localeResolutionCallback을 설정하여 다국어 지원을 활성화합니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'generated/l10n.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        // flutter_localizations 패키지의 기본 위젯 지역화 지원
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        // 생성된 S 클래스의 지역화 지원
        S.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,  // 지원하는 로케일 리스트
      localeResolutionCallback: (locale, supportedLocales) {
        // 앱에서 지원하지 않는 로케일이 들어왔을 때 대체할 로케일 선택
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale?.languageCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;  // 기본 로케일
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).hello),  // 다국어 텍스트 사용
      ),
      body: Center(
        child: Text(S.of(context).welcome),
      ),
    );
  }
}

 

여기서 S 클래스는 자동으로 생성된 클래스이며, ARB 파일에 정의된 문자열을 참조하는 데 사용됩니다.

 

728x90

 

 

4. intl 파일 자동 생성

Flutter에서 intl 패키지를 사용하여 다국어 문자열을 관리하기 위해서는 ARB 파일을 Dart 코드로 변환해주는 명령어를 사용해야 합니다.

 

4.1 flutter_intl 플러그인 설정

flutter_intl 플러그인은 ARB 파일을 Dart 파일로 변환해주는 도구입니다. pubspec.yaml 파일에 다음 코드를 추가하여 설정합니다.

dev_dependencies:
  flutter_localizations:
    sdk: flutter
  intl_translation: ^0.18.0

flutter_intl:
  enabled: true

 

4.2 ARB 파일을 기반으로 Dart 파일 생성

프로젝트 디렉터리에서 다음 명령어를 실행하여 ARB 파일을 Dart 파일로 변환합니다.

flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n lib/main.dart lib/l10n/intl_*.arb

 

이 명령어를 실행하면 ARB 파일을 기반으로 S.dart 파일이 생성됩니다. 이 파일을 통해 다국어 문자열을 쉽게 사용할 수 있습니다.

5. 언어 변경 기능 추가

사용자가 앱 내에서 언어를 변경할 수 있는 기능을 구현할 수 있습니다. 예를 들어, DropdownButton을 사용하여 언어를 선택하게 할 수 있습니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Locale _locale = Locale('en');  // 기본 로케일 설정

  void _changeLanguage(String languageCode) {
    setState(() {
      _locale = Locale(languageCode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        S.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: Scaffold(
        appBar: AppBar(
          title: Text(S.of(context).hello),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(S.of(context).welcome),
            DropdownButton<String>(
              value: _locale.languageCode,
              items: [
                DropdownMenuItem(value: 'en', child: Text('English')),
                DropdownMenuItem(value: 'ko', child: Text('한국어')),
              ],
              onChanged: (String? newValue) {
                if (newValue != null) {
                  _changeLanguage(newValue);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

 

이 코드는 사용자가 드롭다운 메뉴에서 언어를 선택하면, 앱의 언어가 즉시 변경되도록 처리합니다.

6. 날짜 및 숫자 형식 다국어 지원

intl 패키지를 통해 날짜 및 숫자 형식도 각 로케일에 맞게 변환할 수 있습니다.

 

String formattedDate = DateFormat.yMMMMd('en_US').format(DateTime.now());
String formattedNumber = NumberFormat.currency(locale: 'en_US', symbol: '\$').format(1234.56);

 

DateFormat과 NumberFormat을 사용하여 날짜와 숫자를 로케일에 맞게 형식화할 수 있습니다.

결론

Flutter에서 다국어 지원을 설정하면 글로벌 사용자에게 친숙한 앱을 제공할 수 있습니다. intl 패키지와 flutter_localizations를 사용하여 간편하게 다국어 텍스트, 날짜, 숫자 형식 등을 처리할 수 있으며, 앱에서 언어를 동적으로 변경하는 기능도 쉽게 구현할 수 있습니다. 이번 글에서 설명한 방법을 활용하여 Flutter 애플리케이션에서 다국어 지원을 설정해보세요. 다국어 지원을 통해 글로벌 시장을 위한 앱을 구축할 수 있습니다.