[flutter] 플러터 intl을 사용해서 앱의 동적으로 로케일을 변경할 수 있는 기능을 개발하려면 어떻게 해야 하나요?

04 Dec 2023

flutter

플러터에서는 intl 패키지를 사용하여 다국어 지원을 쉽게 구현할 수 있습니다. 이 패키지를 사용하면 앱의 로컬라이제이션(localization)을 손쉽게 처리할 수 있으며, 동적으로 로케일을 변경할 수 있는 기능도 포함됩니다.

다음은 intl 패키지를 사용하여 플러터 앱에서 동적으로 로케일을 변경하는 방법입니다:

intl 패키지를 앱에 추가합니다. pubspec.yaml 파일에서 dependencies 섹션에 아래의 의존성을 추가합니다:

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

main.dart 파일에서 intl 패키지를 import 합니다:

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

앱의 MaterialApp 위젯에서 localizationsDelegates와 supportedLocales 파라미터를 설정합니다. localizationsDelegates는 intl 패키지에서 제공하는 로컬라이제이션 델리게이트를 등록하고, supportedLocales는 어떤 로케일들을 지원할지 설정합니다. 아래는 예시입니다:

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    // intl 패키지의 로컬라이제이션 델리게이트 추가
    // 다른 추가할 델리게이트도 여기에 추가할 수 있음
  ],
  supportedLocales: [
    const Locale('en', 'US'), // 영어 (미국)
    const Locale('ko', 'KR'), // 한국어 (대한민국)
    // 지원할 다른 로케일들도 여기에 추가할 수 있음
  ],
  // ...
)

앱에서 동적으로 로케일을 변경하는 기능을 추가합니다. intl 패키지에서 제공하는 Intl 클래스를 사용하여 특정 로케일로 설정할 수 있습니다. 예를 들어, 다음은 앱에서 버튼을 클릭하여 로케일을 변경하는 기능을 추가하는 예시입니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
      home: Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('한국어'),
            onPressed: () {
              // 'ko_KR' 로케일로 변경
              Intl.defaultLocale = 'ko_KR';
              // 변경된 로케일 적용을 위해 앱을 다시 빌드
              runApp(MyApp());
            },
          ),
        ),
      ),
    );
  }
}

이제 앱을 실행하고 버튼을 클릭하여 로케일을 변경해 보세요. intl 패키지를 사용하여 플러터 앱에서 동적으로 로케일을 변경하는 기능을 개발할 수 있습니다. 자세한 내용은 intl 패키지의 공식 문서를 참조하시기 바랍니다.

참고 자료:

intl 패키지: https://pub.dev/packages/intl
Flutter 로컬라이제이션 가이드: https://flutter.dev/docs/development/accessibility-and-localization/localization