[flutter] flutter_localizations를 사용한 앱의 다국어 지원 타이머 기능 구현 방법

12 Dec 2023

flutter

다국어 지원은 앱을 다양한 국가와 언어 사용자에게 제공하는 데 필수적입니다. Flutter에서는 flutter_localizations 패키지를 사용하여 앱에 다국어 지원을 추가할 수 있습니다. 이 패키지는 앱을 여러 가지 언어로 번역하는 데 필요한 로컬화 및 국제화 지원을 제공합니다. 주로 앱의 UI 요소, 메시지 및 에러 메시지를 다양한 언어로 표현할 수 있게 합니다.

이 튜토리얼에서는 flutter_localizations 를 사용하여 앱의 타이머 기능을 구현하고, 앱을 한국어와 영어로 번역하는 방법을 살펴보겠습니다.

flutter_localizations 패키지 추가하기

먼저, pubspec.yaml 파일에 flutter_localizations 패키지를 추가합니다.

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

flutter:
  uses-material-design: true
  assets:
    ...

이후 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치합니다.

지원할 언어 설정하기

flutter_localizations 패키지를 사용하여 지원할 언어를 설정합니다. MaterialApp 위젯의 localizationsDelegates와 supportedLocales 속성을 사용하여 지원할 언어를 명시적으로 지정할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:my_app/l10n/app_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ko', ''),
      ],
      ...
    );
  }
}

앱에 다국어 지원 적용하기

flutter_localizations 패키지를 이용해서 앱에 다국어 지원을 적용해봅시다. AppLocalizations 클래스를 추가하여 지원할 언어에 따라 해당 언어로 번역된 문자열을 반환하도록 구현합니다.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class AppLocalizations {
  static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

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

  String get timerLabel {
    return Intl.message(
      'Timer',
      name: 'timerLabel',
      desc: 'Label for the timer',
    );
  }

  ...
}

class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'ko'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations());
  }

  @override
  bool shouldReload(_AppLocalizationsDelegate old) => false;
}

다국어로 된 문자열 사용하기

이제 앱의 일부 UI에 다국어로 된 문자열을 사용해봅시다. 예를 들어, 타이머 기능의 라벨에 다국어로 된 문자열을 적용하려면 다음과 같이 사용할 수 있습니다.

Text(
  AppLocalizations.of(context).timerLabel,
  style: TextStyle(fontSize: 20),
)

위와 같이 AppLocalizations 클래스를 사용하여 해당 언어에 따라 올바른 문자열이 표시되도록 구현할 수 있습니다.

이제 flutter_localizations 패키지를 사용하여 앱의 타이머 기능을 구현하고, 앱을 다양한 언어로 번역하는 방법에 대해 배웠습니다. 이를 통해 다국어 지원 기능이 추가된 멋진 Flutter 앱을 만들어볼 수 있습니다.

더 많은 자세한 내용은 Flutter 공식 문서를 참고하세요.