Colin's Blog
[flutter] 플러터 TimePicker에서 다국어 지원하기

플러터(Flutter)는 Google에서 개발한 인기있는 크로스 플랫폼 프레임워크입니다. 플러터를 사용하면 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있습니다. 다국어 지원은 앱을 사용하는 사용자들에게 좋은 사용자 경험을 제공하기 위해 중요한 요소입니다. 이번 포스트에서는 플러터의 TimePicker 위젯에 다국어 지원을 추가하는 방법을 알아보겠습니다.

1. intl 라이브러리 추가하기

다국어 지원을 위해서는 intl 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 다음 dependencies 섹션에 intl 라이브러리를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

저장 후 flutter pub get 명령어를 사용하여 라이브러리를 다운로드 받아주세요.

2. 다국어 번역 파일 생성하기

플러터에서는 각 언어에 대한 번역을 관리하기 위해 intl 라이브러리가 제공하는 arb 파일을 사용합니다. 이 파일은 JSON 형식으로 번역할 문구와 번역된 문구가 쌍으로 이루어져 있습니다. lib/l10n 폴더를 생성하고 그 안에 intl_messages.arb 파일을 생성해주세요.

{
  "@@locale": "ko_KR",
  "hello": "안녕하세요"
}

이 예제에서는 한국어(ko_KR)에 대한 번역을 작성하였습니다. 필요한 만큼 다른 언어에 대한 번역도 추가할 수 있습니다.

3. 다국어 번역 클래스 생성하기

번역한 내용을 앱에서 사용하기 위해서는 이를 사용할 클래스를 생성해야 합니다. gen_l10n 패키지를 사용하여 자동으로 클래스를 생성할 수 있습니다. pubspec.yaml 파일에 다음과 같은 설정을 추가해주세요.

dev_dependencies:
  flutter_localizations:
    sdk: flutter
  gen_l10n: ^4.0.0

저장 후 flutter pub get 명령어를 사용하여 라이브러리를 다운로드 받아주세요. 그 다음 터미널 창에서 flutter pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/localization.dart 명령어를 실행하여 intl_messages.arb 파일을 생성합니다.

이후 터미널에서 flutter pub run gen_l10n 명령어를 실행하면 .arb 파일로부터 자동으로 다국어 번역 클래스가 생성됩니다.

4. 다국어 적용하기

다국어 번역이 작성되고 클래스가 생성되었다면 이를 앱에 적용해야 합니다. main.dart 파일에서 MaterialApp 위젯을 사용하는 부분을 수정해보겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:your_app_name/l10n/generated_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        MyLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: MyLocalizations.delegate.supportedLocales,
      title: 'Your App Name',
      home: HomeScreen(),
    );
  }
}

플러터의 국제화 기능을 활성화하기 위해 localizationsDelegates와 supportedLocales를 수정하였습니다. MyLocalizations는 앞서 생성한 다국어 번역 클래스의 인스턴스입니다.

5. 다국어 사용하기

이제 다국어가 적용된 앱을 사용할 수 있습니다. 다국어 문구를 사용하고 싶은 곳에서 MyLocalizations.of(context).hello와 같이 호출하여 다국어 문구를 표시할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:your_app_name/l10n/generated_localizations.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(MyLocalizations.of(context).hello),
      ),
      body: Center(
        child: Text(
          MyLocalizations.of(context).hello,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

이제 앱을 실행하면 TimePicker 위젯에서 다국어로 번역된 문구를 확인할 수 있습니다.

결론

플러터를 사용하여 다국어 지원을 구현하는 방법에 대해 알아보았습니다. intl 라이브러리와 gen_l10n 패키지를 사용하여 번역 파일과 번역 클래스를 생성하고, 앱에 다국어를 적용하는 방법을 살펴보았습니다. 사용자에게 더 나은 사용자 경험을 제공하기 위해 다국어 지원은 중요한 요소이므로 꼭 구현해보시기 바랍니다.

© 2018 Colin. All rights reserved.