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 코드 리스트는 아래 사이트에 잘 정리 되어 있으니 참고하자.
262588213843476