[flutter] 플러터 intl을 사용해서 앱에서 실패 메시지를 다국어로 처리하는 방법을 알려주세요.

04 Dec 2023

flutter

플러터(Intl)는 다국어 지원을 위한 훌륭한 패키지입니다. 이 패키지를 사용하면 간단하게 앱에서 실패 메시지를 다국어로 처리할 수 있습니다. 이번 가이드에서는 플러터 Intl 패키지를 사용하여 앱의 다국어 처리를 구현하는 방법을 알아보겠습니다.

단계 1: Intl 패키지 추가하기

먼저, intl 패키지를 pubspec.yaml 파일에 추가해야 합니다. 이를 위해 아래의 코드를 dependencies 섹션에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

dev_dependencies:
  intl: ^0.17.0
  flutter_test:
    sdk: flutter

추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.

단계 2: 다국어 메시지 파일 생성하기

다국어 메시지를 저장할 파일을 생성해야 합니다. 이 파일은 lib 폴더 내부에 l10n 폴더와 그 아래에 messages.arb 파일이라는 구조로 만들어야 합니다.

messages.arb 파일 내부는 아래와 같은 형식으로 작성되어야 합니다:

{
  "messageKey": "Message Text"
}

예를 들어, en 영어와 ko 한국어로 다국어 처리를 할 경우 messages.arb 파일은 다음과 같아야 합니다:

{
  "hello": "Hello!",
  "goodbye": "Goodbye!"
}

단계 3: 다국어 지원 설정하기

main.dart 파일의 main 함수 내부에서 모든 다국어로 지원할 로케일을 설정해야 합니다. 이를 위해 Intl.defaultLocale 변수를 사용하면 됩니다.

아래는 main 함수에서 로케일을 설정하는 코드의 예시입니다:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeMessages('en'); // 기본 로케일을 영어로 설정
  Intl.defaultLocale = 'en';
  
  // ...
}

단계 4: 다국어 메시지 사용하기

이제 앱 내에서 다국어 메시지를 사용할 수 있습니다.

예를 들어, Hello라는 메시지를 출력하는 경우, 다음과 같은 코드를 사용할 수 있습니다:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'l10n/messages_all.dart';

class MyLocalizedApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Localized App',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ko', ''),
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          Intl.message('hello', name: 'hello'),
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

위 코드에서는 Intl.message() 메서드를 사용하여 hello라는 메시지를 가져와 출력하고 있습니다. 이 메서드는 현재 설정된 로케일에 해당하는 메시지를 반환합니다.

이와 같은 방식으로 다른 메시지를 다국어로 처리할 수 있습니다.

이제 위의 코드를 실행하면 앱이 영어로 Hello라는 텍스트를 출력할 것입니다. 로케일을 변경하면 해당 언어에 맞는 메시지로 변경될 것입니다.

플러터 Intl 패키지를 사용하여 앱의 실패 메시지를 다국어로 처리하는 방법에 대해 알아보았습니다. 이를 통해 다국어 사용자들에게 더 나은 앱 경험을 제공할 수 있습니다.