[flutter] 플러터 intl을 사용해서 앱에서 로케일 변경을 앱 설정에서 수동으로 지원하는 방법을 알려주세요.

04 Dec 2023

flutter

다국어 지원은 앱의 사용자들이 편리하게 자신에게 적합한 언어로 앱을 사용할 수 있도록 도와줍니다. Flutter는 intl 패키지를 사용하여 앱에서 다국어 지원을 구현할 수 있습니다. 이 패키지를 사용하여 앱 설정에서 수동으로 로케일을 변경하는 방법을 알아보겠습니다.

1. intl 패키지 추가

먼저, intl 패키지를 앱에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 intl 패키지를 추가합니다:

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

flutter_localizations는 flutter의 로케일 지원을 위한 패키지이며, intl 패키지와 함께 사용됩니다. intl 패키지의 버전은 확인하시고 적절한 버전을 사용하기 바랍니다.

2. 앱에 로케일 추가

앱에서 지원할 다국어의 로케일을 추가해야 합니다. 일반적인 경우, MaterialApp 위젯의 localizationsDelegates와 supportedLocales을 설정하여 로케일을 추가합니다. 다음은 예시입니다:

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,
      ],
      supportedLocales: [
        Locale('en', 'US'), // English
        Locale('ko', 'KR'), // Korean
        Locale('es', 'ES'), // Spanish
      ],
      title: 'My App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.title), // 다국어 지원
      ),
      body: Center(
        child: Text(AppLocalizations.of(context)!.welcomeMessage), // 다국어 지원
      ),
    );
  }
}

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    String? langCode = locale.languageCode;
    String? countryCode = locale.countryCode;
    if (langCode != null && countryCode != null) {
      return initializeMessages('$langCode_$countryCode').then((_) {
        Intl.defaultLocale = '$langCode_$countryCode';
        return AppLocalizations();
      });
    } else if (langCode != null) {
      return initializeMessages(langCode).then((_) {
        Intl.defaultLocale = langCode;
        return AppLocalizations();
      });
    }
    throw FlutterError('Invalid locale $locale');
  }

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

  String get title {
    return Intl.message(
      'My App',
      name: 'title',
    );
  }

  String get welcomeMessage {
    return Intl.message(
      'Welcome!',
      name: 'welcomeMessage',
    );
  }
}

supportedLocales에는 앱에서 지원할 로케일을 추가합니다. 각 로케일은 Locale 객체로 구성되며, 언어 코드와 국가 코드를 지정할 수 있습니다.

AppLocalizations 클래스에서는 Intl.message를 사용하여 다국어로 변환될 문자열을 정의합니다. 각 다국어 문자열은 name으로 구분되며, Intl.message를 통해 해당 문자열을 로케일에 따라 변환할 수 있습니다.

3. 로케일 변경

앱의 로케일을 변경하기 위해 사용자가 앱 설정에서 선택한 로케일을 저장해야 합니다. 이를 위해 다음과 같이 SharedPreferences 또는 기타 선택한 상태 관리 패키지를 사용할 수 있습니다.

Future<void> setLocale(Locale locale) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('locale', locale.toLanguageTag());
  // 앱 화면을 갱신
  // 예: MyApp 위젯을 다시 빌드
}

Locale? getSavedLocale() {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String? localeTag = prefs.getString('locale');
  if (localeTag != null) {
    return Locale.fromSubtags(languageCode: localeTag.split('_')[0], countryCode: localeTag.split('_')[1]);
  }
  return null;
}

setLocale 메서드를 사용하여 로케일을 저장하고, getSavedLocale 메서드를 사용하여 저장된 로케일을 가져옵니다. 이 로케일은 main 메서드에서 MyApp 위젯을 빌드할 때 로케일을 설정하는 데 사용됩니다.

앱 설정 화면에서 로케일을 변경할 수 있도록 사용자에게 선택할 수 있는 목록을 제공하고, 해당 로케일을 저장하는 로직을 구현하면 됩니다.

이제 Flutter Intl 패키지를 사용하여 앱 설정에서 수동으로 로케일을 변경하는 방법을 알게 되었습니다. 앱 사용자들이 좀 더 편리하게 앱을 다국어로 사용할 수 있도록 지원할 수 있습니다.