[flutter] 플러터 intl을 사용해서 앱에서 날짜 형식을 다국어로 설정하는 방법을 알려주세요.

04 Dec 2023

flutter

다국어 애플리케이션을 개발할 때, 날짜 형식을 해당 지역에 맞게 표시하는 것은 중요합니다. Flutter에서는 intl 패키지를 사용하여 다국어 지원을 할 수 있습니다. 이 패키지를 사용하여 앱에서 날짜 형식을 다국어로 설정하는 방법을 알아보겠습니다.

intl 패키지 추가하기

먼저, pubspec.yaml 파일에 intl 패키지를 추가해야 합니다. 아래와 같이 dependencies에 intl 패키지를 추가해주세요.

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

프로젝트 루트 폴더에서 flutter pub get을 실행하여 패키지를 다운로드 합니다.

지역 설정하기

다국어 지원을 위해서는 앱의 지역을 설정해야 합니다. MaterialApp 위젯의 localizationsDelegates 속성에 GlobalMaterialLocalizations.delegate를 추가하여 지역 설정을 할 수 있습니다.

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

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '다국어 날짜 형식',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate
      ],
      supportedLocales: [
        const Locale('en'),  // 영어
        const Locale('ko'),  // 한국어
        const Locale('ja'),  // 일본어
        const Locale('es'),  // 스페인어 (Spanish)
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('다국어 날짜 형식'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '오늘의 날짜: ${DateFormat.yMMMMEEEEd().format(DateTime.now())}',
            ),
          ],
        ),
      ),
    );
  }
}

위 예제에서는 영어, 한국어, 일본어, 스페인어의 지역을 설정하였습니다. 필요한 경우 추가적인 지역을 설정할 수 있습니다.

날짜 형식 적용하기

이제 intl 패키지의 DateFormat을 사용하여 날짜 형식을 설정할 수 있습니다. 위 예제에서는 yMMMMEEEEd() 형식을 사용하여 다양한 정보를 포함한 형식으로 표시하였습니다. 해당 형식을 원하는 형식으로 변경하실 수 있습니다.

Text(
  '오늘의 날짜: ${DateFormat.yMMMMEEEEd().format(DateTime.now())}',
),

위 코드에서는 DateFormat.yMMMMEEEEd().format(DateTime.now())를 사용하여 현재 날짜를 다국어 형식으로 표시하였습니다.

결론

Flutter에서 intl 패키지를 사용하여 앱의 날짜 형식을 다국어로 설정하는 방법에 대해 알아보았습니다. 이를 통해 다국어 앱의 사용자 경험을 향상시킬 수 있습니다. 자세한 내용은 intl 패키지의 공식 문서를 참고해주세요.