Flutter의 로컬라이제이션(Localization) 사용법

로컬라이제이션(Localization)은 앱이 여러 언어를 지원할 수 있도록 하는 중요한 기능입니다. Flutter는 다양한 언어와 지역에 맞춰 앱을 쉽게 로컬라이즈할 수 있는 강력한 지원을 제공합니다. 이번 글에서는 Flutter에서 로컬라이제이션을 설정하고 사용하는 방법을 단계별로 설명하겠습니다.

1. 로컬라이제이션(Localization) 기본 개념

Flutter의 로컬라이제이션은 앱이 다국어를 지원하도록 만드는 과정입니다. 이를 통해 앱 내 텍스트, 날짜, 숫자 등의 형식을 사용자의 언어와 지역에 맞게 변환할 수 있습니다. 로컬라이제이션을 구현하려면 Flutter의 flutter_localizations 패키지와 intl 패키지를 사용하게 됩니다.

2. pubspec.yaml에 의존성 추가

먼저, 로컬라이제이션을 설정하기 위해 Flutter의 로컬라이제이션 및 국제화 패키지를 추가해야 합니다.

 

2.1 pubspec.yaml 수정

다음과 같이 pubspec.yaml 파일에 필요한 의존성을 추가합니다.

 

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

 

flutter_localizations는 기본 위젯과 텍스트를 각 언어로 지역화하는 데 사용되며, intl 패키지는 문자열, 날짜, 숫자 등의 형식화를 관리하는데 사용됩니다.

3. 언어 리소스 파일 생성

다국어 지원을 위해 각 언어별로 별도의 리소스 파일을 생성해야 합니다. 이 파일들은 arb (Application Resource Bundle) 형식으로 작성되며, 앱에서 사용할 문자열을 정의합니다.

 

3.1 lib/l10n 폴더 생성

lib/l10n 폴더를 생성하고 각 언어에 대한 리소스 파일을 추가합니다. 예를 들어, 영어와 한국어를 지원하는 경우 intl_en.arb와 intl_ko.arb 파일을 생성합니다.

• intl_en.arb (영어)

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

 

• intl_ko.arb (한국어)

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

 

 

반응형

 

4. MaterialApp에서 로컬라이제이션 설정

이제 앱의 로컬라이제이션을 적용하기 위해 MaterialApp 위젯에 로컬라이제이션 설정을 추가해야 합니다.

 

4.1 main.dart 수정

앱의 메인 파일인 main.dart에서 localizationsDelegates, supportedLocales, localeResolutionCallback을 추가하여 앱이 지원할 언어 목록을 설정합니다.

 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Localization Demo',
      localizationsDelegates: [
        // Flutter에서 기본으로 제공하는 로컬라이제이션 지원
        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 파일에서 자동 생성된 로컬라이제이션 클래스입니다. ARB 파일에 정의된 각 문자열은 S.of(context)를 통해 접근할 수 있습니다.

5. intl 파일 생성 및 업데이트

Flutter에서 ARB 파일을 기반으로 Dart 코드를 생성하기 위해 intl_translation 도구를 사용합니다. 이 도구는 ARB 파일을 바탕으로 S.dart 파일을 생성하여 로컬라이제이션에 필요한 문자열을 제공합니다.

 

5.1 intl 도구 설정

flutter_intl 플러그인을 추가하여 intl 파일을 자동으로 생성하도록 설정할 수 있습니다. pubspec.yaml에 다음 설정을 추가합니다.

dev_dependencies:
  intl_translation: ^0.18.0

flutter_intl:
  enabled: true

 

5.2 ARB 파일을 Dart 파일로 변환

다음 명령어를 실행하여 ARB 파일을 Dart 파일로 변환합니다.

 

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

 

이 명령어는 lib/l10n 폴더에 S.dart 파일을 생성하여 앱에서 다국어 문자열을 쉽게 사용할 수 있게 해줍니다.

 

 

728x90

 

6. 언어 변경 기능 구현

앱에서 사용자가 언어를 변경할 수 있도록 하는 기능을 추가할 수 있습니다. 이를 위해 locale 속성을 동적으로 설정하고, 드롭다운 메뉴를 사용하여 사용자가 언어를 선택하도록 구현할 수 있습니다.

 

6.1 언어 변경 구현

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);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

이 코드는 사용자가 드롭다운 메뉴를 통해 앱의 언어를 변경할 수 있게 합니다. locale 속성을 동적으로 변경하여 앱의 언어가 실시간으로 바뀌도록 설정합니다.

결론

Flutter에서 로컬라이제이션을 설정하면 다국어를 지원하는 앱을 손쉽게 구현할 수 있습니다. intl 패키지와 flutter_localizations를 활용하여 다국어 문자열을 처리하고, 동적으로 언어를 변경하는 기능을 구현할 수 있습니다. 이번 글에서 설명한 방법을 활용하여 Flutter 애플리케이션에 로컬라이제이션을 적용하고, 글로벌 사용자에게 맞는 앱을 제공해보세요.