[flutter] 플러터 앱에서 지역화된 여행 정보 표시 방법

12 Dec 2023

flutter

플러터(Flutter)를 사용하여 다국어 지원 기능을 구현하여 지역화된 여행 정보를 표시하는 방법에 대해 알아보겠습니다.

지역화 준비

먼저 앱에서 지원할 여러 언어의 지역화된 문자열을 준비해야 합니다. Flutter 앱에서는 arb 형식의 다국어 지원 파일을 사용합니다. 프로젝트의 l10n 폴더에 app_en.arb, app_ko.arb와 같이 언어별로 지역화된 문자열을 담은 파일들을 준비합니다.

지역화된 문자열 사용

다국어 지원 파일을 작성한 후 Flutter 앱 코드에서 해당 문자열을 사용할 수 있습니다.

// 예시: 다국어 지원을 위한 문자열 가져오기
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class TravelInfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(AppLocalizations.of(context).welcomeMessage),
        Text(AppLocalizations.of(context).travelInfo),
      ],
    );
  }
}

언어 변경 지원

Flutter에서는 사용자가 원하는 언어로 앱을 사용할 수 있도록 Locale을 이용해 언어를 변경할 수 있습니다.

// 예시: 사용자가 언어를 변경할 수 있는 기능
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class LanguageSelectionWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DropdownButton<Locale>(
      value: Localizations.localeOf(context),
      items: [
        DropdownMenuItem(
          value: Locale('en', 'US'),
          child: Text('English'),
        ),
        DropdownMenuItem(
          value: Locale('ko', 'KR'),
          child: Text('한국어'),
        ),
      ],
      onChanged: (locale) {
        Locale currentLocale = Localizations.localeOf(context);
        if (locale != currentLocale) {
          LocaleChangedNotification(locale).dispatch(context);
        }
      },
    );
  }
}

결론

Flutter를 사용하면 간단하게 다국어 지원 기능을 구현할 수 있어서 국제 사용자들에게 다양한 언어로 여행 정보를 제공할 수 있습니다. 지역화된 문자열과 언어 변경 기능을 활용하여 국제적인 사용자들에게 친숙하고 편리한 앱을 제공할 수 있습니다.

참고 자료: Flutter Internationalization