[flutter] 플러터 intl을 사용해서 앱에서 통화 단위를 사용자가 설정한 언어에 따라 자동으로 변경할 수 있나요?

04 Dec 2023

flutter

플러터에서는 intl 패키지를 사용하여 다국어 지원을 할 수 있습니다. 통화 단위도 사용자가 설정한 언어에 따라 자동으로 변경하는 방법을 알아보겠습니다.

먼저, intl 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음을 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

이제 통화 단위를 지원할 다국어 리소스 파일을 생성해야 합니다. 예를 들어, en_US와 ko_KR과 같은 다국어 코드에 따라 리소스 파일을 생성할 수 있습니다.

lib/i18n 디렉토리에 messages.dart 파일을 생성하고 다음과 같이 작성하세요:

import 'package:intl/intl.dart';

final localeCurrencyMap = {
  'en_US': 'USD',
  'ko_KR': 'KRW',
};

String getCurrencySymbol(String locale) {
  if (localeCurrencyMap.containsKey(locale)) {
    return NumberFormat.simpleCurrency(locale: locale).currencySymbol;
  }
  return NumberFormat.simpleCurrency().currencySymbol;
}

이제 main.dart 파일에 통화 단위를 표시할 위젯을 작성하고, getCurrencySymbol 메서드를 사용하여 로케일에 따라 통화 단위를 동적으로 변경할 수 있습니다. 예를 들어:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'package:intl/intl_standalone.dart';
import 'package:your_app/i18n/messages.dart';

void main() async {
  await initializeDateFormatting();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('ko', 'KR'),
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      localeResolutionCallback: (Locale locale, Iterable<Locale> supportedLocales) {
        return locale;
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String locale = Intl.defaultLocale;
    String currencySymbol = getCurrencySymbol(locale);

    return Scaffold(
      appBar: AppBar(
        title: Text('Your App'),
      ),
      body: Center(
        child: Text(
          '1000 ${currencySymbol}', // 통화 단위를 추가하여 표시
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

이제 앱을 실행하면 사용자가 설정한 언어에 따라 통화 단위가 자동으로 변경되어 표시됩니다. 예를 들어, 사용자가 한국어를 선택하면 “1000 KRW”로 표시되고, 영어를 선택하면 “1000 USD”로 표시됩니다.

이것이 플러터에서 통화 단위를 사용자가 설정한 언어에 따라 자동으로 변경하는 방법입니다. 플러터의 intl 패키지를 사용하면 다국어 지원과 통화 단위 변경이 편리하게 구현될 수 있습니다.