[flutter] 플러터 intl을 사용해서 여러 개의 로케일을 지원할 수 있나요?

04 Dec 2023

flutter

intl 패키지는 Flutter 앱의 다국어 지원을 쉽게 구현할 수 있도록 도와주는 패키지입니다. 이 패키지를 사용하면 앱의 텍스트, 날짜, 시간 및 숫자 형식을 다양한 언어에 맞게 로컬라이징할 수 있습니다.

다음은 플러터 intl을 사용하여 여러 개의 로케일을 지원하는 방법에 대한 간단한 예시입니다:

먼저, pubspec.yaml 파일에 intl 패키지를 추가해주세요. 다음의 의존성을 추가해주세요:

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

main.dart에서 다국어 지원을 설정해주세요. 다음과 같이 MaterialApp 위젯을 사용하여 로케일을 설정할 수 있습니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        // 추가로 다국어 지원을 위한 로케일 델리게이트를 등록해주세요.
        // 여기서는 예시로 한국어(ko)와 영어(en)를 지원합니다.
        // 필요한 언어에 따라 추가로 등록해주세요.
        // 지원 가능한 언어 리스트는 `intl` 패키지에서 확인할 수 있습니다.
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('ko', 'KR'),
        const Locale('en', 'US'),
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        // 사용자의 기본 언어 혹은 앱 지원 언어 중에서 가장 적합한 언어를 선택합니다.
        // 여기서는 사용자의 기본 언어를 기본으로 선택하도록 설정합니다.
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale.languageCode &&
              supportedLocale.countryCode == locale.countryCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // flutter_localizations 패키지에서 제공하는 `MaterialLocalizations` 클래스를 사용하여
    // 현재 선택된 로케일에 맞는 텍스트를 가져옵니다.
    var translation = MaterialLocalizations.of(context).openAppDrawerTooltip;

    return Scaffold(
      appBar: AppBar(
        title: Text(translation),
      ),
      body: Center(
        child: Text(translation),
      ),
    );
  }
}

위의 코드 예시에서는 MaterialLocalizations 클래스를 사용하여 현재 선택된 로케일에 맞는 텍스트를 가져옵니다. 따라서 openAppDrawerTooltip 텍스트는 현재 선택된 언어에 따라 자동으로 변경됩니다.

이렇게 플러터의 intl 패키지를 사용하여 다국어 지원을 구현할 수 있습니다. 필요한 언어에 따라 로케일을 추가로 설정하고, 해당 언어에 맞는 텍스트를 가져와서 앱에서 사용할 수 있습니다.

많은 언어를 지원하는 앱을 개발할 때는 추가적인 설정과 번역 파일을 사용해야 할 수도 있습니다. 이 경우에는 intl 패키지의 다른 기능들을 참고하여 앱을 개발하시면 됩니다.

더 자세한 내용은 intl 패키지 공식 문서를 참조하시기 바랍니다.