[flutter] 플러터 intl을 사용해서 앱에서 지역에 따라 마찬가지 문구를 다른 형태로 표현하는 방법을 알려주세요.

04 Dec 2023

flutter

앱을 개발할 때, 사용자가 다른 지역에 위치해 있을 수 있습니다. 따라서 앱 내에서 보여지는 텍스트를 사용자의 위치에 맞게 다른 형태로 표현하는 것이 중요합니다. 플러터(Flutter)의 Intl 패키지를 사용하면 간단하게 이러한 기능을 구현할 수 있습니다.

1. Intl 패키지 추가하기

먼저, intl 패키지를 앱에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음 코드를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

이제 패키지를 가져오고 의존성을 업데이트하기 위해 터미널에서 다음 명령어를 실행합니다.

flutter pub get

2. 다국어 리소스 파일 생성하기

다국어 텍스트를 관리하기 위해 리소스 파일을 생성해야 합니다. lib 폴더 내에 l10n 폴더를 생성하고, 그 안에 messages.dart 파일을 만듭니다. messages.dart 파일에는 지역별로 다른 문구를 포함한 맵이 정의됩니다. 아래의 코드는 messages.dart 파일의 예시입니다.

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

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

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

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

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

  @override
  bool isSupported(Locale locale) {
    return ['en', 'ko'].contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) async {
    AppLocalizations localizations = AppLocalizations();
    await initializeMessages(locale.toString());
    Intl.defaultLocale = locale.toString();
    return localizations;
  }

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

위의 코드에서 hello 메서드는 다국어로 인식되고, Intl.message 함수를 사용하여 다국어 텍스트를 정의합니다.

3. 지역 설정하기

이제 사용자의 위치에 따라 앱의 언어를 설정할 수 있도록 해보겠습니다. main.dart 파일을 열고 다음 코드를 수정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Localization',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ko', ''),
      ],
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String helloMsg = AppLocalizations.of(context).hello;
    return Scaffold(
      appBar: AppBar(title: Text('Localization Example')),
      body: Center(child: Text(helloMsg)),
    );
  }
}

위의 코드에서 MyApp 위젯의 localizationsDelegates에 AppLocalizations.delegate를 추가하고, supportedLocales에 사용될 언어 목록을 설정합니다. MyHomePage 위젯에서 AppLocalizations 클래스의 hello 메서드를 사용하여 다국어 텍스트를 가져옵니다.

4. 앱 실행하기

이제 앱을 실행하고 앱 내에 보여지는 텍스트가 사용자의 위치에 맞게 변경되는지 확인할 수 있습니다. MyHomePage 위젯에서 hello 메서드를 호출하는 부분에 다른 다국어 텍스트를 추가하여 테스트할 수도 있습니다.

이렇게 플러터의 Intl 패키지를 사용하여 앱에서 지역에 따라 다른 문구를 표현하는 방법을 알아보았습니다. 이를 통해 사용자가 앱을 사용할 때 더욱 편리하고 친근한 경험을 제공할 수 있습니다.

참고 자료: