Colin's Blog
[flutter] 플러터 intl을 사용해서 어떤 언어로 앱을 지원해볼까요?

플러터는 다국어 지원을 위한 intl 패키지를 제공합니다. 이 패키지를 사용하면 앱을 여러 언어로 번역하여 제공할 수 있습니다. 플러터 intl은 다양한 다국어 기능을 제공하며, 현재 지원되는 언어의 목록도 상당히 많습니다.

다음은 플러터 intl을 사용해서 어떻게 언어를 지원하는지에 대한 간단한 예시입니다.

  1. intl 패키지 추가하기

먼저 pubspec.yaml 파일에서 intl 패키지를 추가해야 합니다. 이를 위해 dependencies 섹션에 다음과 같이 intl을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0
  1. 언어 파일 생성하기

다국어 지원을 위해 앱 내 각 언어에 대한 메시지를 정의하는 파일을 생성해야 합니다. 일반적으로 lib/l10n 디렉토리 내에 언어별 파일을 작성하는 것이 좋습니다.

lib
 └── l10n
     ├── app_en.arb
     ├── app_ko.arb
     └── ...

app_en.arb와 app_ko.arb는 각각 영어와 한국어로 앱의 메시지를 정의하는 파일입니다. 이 파일에는 앱의 각 요소에 대한 번역된 문자열을 포함해야 합니다.

  1. 번역된 문자열 사용하기

이제 번역된 문자열을 앱에서 사용할 수 있습니다. l10n/intl_messages.dart 파일을 생성하여 다음과 같이 작성합니다.

import 'package:intl/intl.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

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

  String get greeting {
    return Intl.message('Hello', name: 'greeting');
  }
}

AppLocalizations 클래스는 다국어 지원을 위한 클래스로, 각 언어에 따른 번역된 문자열을 반환합니다. greeting 메서드는 ‘Hello’라는 문자열을 반환하는 예시입니다. 이 중국어나 일본어 등 다른 언어로 번역하려면 name 매개변수에 해당 언어의 키를 지정하면 됩니다.

  1. 앱에서 언어 설정하기

마지막으로, 앱에서 언어를 설정하는 방법을 알아보겠습니다. 앱의 main.dart 파일에서 다음과 같이 작성합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 사용자가 설정한 로케일 가져오기
  var locale = await getPreferredLocale();

  runApp(MyApp(locale: locale));
}

Future<Locale> getPreferredLocale() async {
  // 사용자가 설정한 로케일을 가져오는 로직
  // 여기서는 간단하게 영어로 설정했다고 가정합니다.
  return Locale('en');
}

class MyApp extends StatefulWidget {
  final Locale locale;

  const MyApp({Key key, this.locale}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  AppLocalizations _appLocalizations;

  @override
  void initState() {
    super.initState();

    // 번역된 문자열 가져오기
    AppLocalizations.load(widget.locale).then((localizations) {
      setState(() {
        _appLocalizations = localizations;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_appLocalizations == null) {
      // 번역이 완료되지 않았을 경우 로딩 화면 또는 다른 처리를 할 수 있습니다.
      return CircularProgressIndicator();
    }

    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        AppLocalizations.delegate,
      ],
      supportedLocales: [
        // 지원하는 언어 목록을 추가합니다.
        const Locale('en'),
        const Locale('ko'),
        // ...
      ],
      locale: widget.locale,
      // ...
    );
  }
}

위 예시에서 MyApp 위젯의 locale 매개변수에 사용자가 설정한 로케일을 전달하여 앱의 언어를 설정합니다. supportedLocales에 지원하는 언어 목록을 추가하고, locale에 현재 언어 설정을 전달합니다.

이렇게 하면 플러터 intl을 사용하여 다국어를 지원하는 앱을 만들 수 있습니다. 추가로 AppLocalizations 클래스에서 지원하는 다양한 기능을 사용하면 번역된 문자열을 동적으로 변경하거나 문화 관련 기능을 사용할 수도 있습니다.

자세한 내용은 플러터 공식 문서를 참조하세요.

© 2018 Colin. All rights reserved.