Flutter에서 Locale을 적용하는 법에 대해 알아보자

Flutter로 개발을 하다보면 이미 기본적으로 탑재되어 있는 위젯들을 사용할 때 기본 설정으로 언어는 영어로 설정이 되어있다. 예를 들면 날짜를 선택 할 수 있게 도와주는 showDatePicker 같은 경우 locale 옵션을 따로 설정하지 않으면 영어로 나오게 된다.

그 외에도 여러 언어를 지원하는 앱을 만드는 경우 locale 설정은 필수이다.

이번 포스트에서는 Flutter에서 Locale을 사용하는 법에 대해 알아본다. 참고로 공식 페이지에도 설명이 잘 나와있다.

#필요한 패키지 설치

intl 패키지와 flutter_localizations 패키지가 필요하다. 이 포스트를 작성하는 시점에서 flutter_localizations를 사용하기 위해서는 intl 0.18.0 버전이 필요했는데, 최신 버전인 0.18.1 버전이 설치되어있으면 flutter_localizations를 설치하지 못했다.

이미 intl 패키지를 사용중이라면 우선 intl 을 any로 다시 설치해주자.

flutter pub add intl:any

그 다음 sdk에서 flutter_localizations 를 설치.

flutter pub add flutter_localizations --sdk=flutter

이걸로 필요한 패키지 설치는 끝.

#MaterialApp에 설정 추가

MaterialApp 에 설정을 추가해주어야 한다. 보통은 main.dart 파일에서 사용하기 때문에 거기서 설정해주면 된다.

우선 패키지 import

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp 에 다음 부분을 추가해주면 된다.

return const MaterialApp(
  // ...생략
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  // 자신에게 필요한 언어 locale을 모두 추가
  supportedLocales: [
    Locale('en'), // 영어
    Locale('es'), // 스페인어
    Locale('ko'), // 한국어
    Locale('ja'), // 일본어
  ],
  // ...생략
);

여기서 설정해준 locale 들은 locale 옵션을 설정 할 수 있는 위젯에서 사용할 수 있게 된다. showDatePicker 를 예로 들면 아래와 같다.

DateTime? pickedDate = await showDatePicker(
                        locale: const Locale('ko', 'KR'),
                        context: context,
                        initialDate: DateTime.now(),
                        firstDate: DateTime(2000),
                        lastDate: DateTime.now(),
                      );

이렇게 하면 영어로 나오던 날짜 선택창이 한글로 나오는 것을 확인 할 수 있다.

locale 코드 리스트는 아래 사이트에 잘 정리 되어 있으니 참고하자.