-
intl 패키지 추가하기 앱에서 지역화 언어를 처리하기 위해 intl 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 intl 패키지를 추가해주세요.
dependencies: flutter: sdk: flutter intl: ^0.17.0
-
지역화 언어 파일 준비하기 앱의 기본 언어 및 지원할 다른 언어에 대한 지역화 언어 파일을 준비해야 합니다. 예를 들어, 영어와 한국어를 지원하려는 경우, ‘en.arb’와 ‘ko.arb’ 파일을 만들어야 합니다.
다음은 ‘en.arb’ 파일의 예시입니다.
{ "title": "Hello, World!", "description": "Welcome to my app." }
‘ko.arb’ 파일의 경우, “title”과 “description” 값을 한국어로 번역해서 작성해야 합니다.
-
언어 변경 로직 구현하기 앱에서 사용할 언어를 변경하는 기능을 구현해야 합니다. 다음은 언어 변경 로직을 구현하는 예시입니다.
import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:intl/intl_standalone.dart'; class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Locale _locale = const Locale('en'); // 기본 언어 설정 @override void initState() { super.initState(); Intl.defaultLocale = _locale.toLanguageTag(); // Intl 패키지의 기본 로케일 설정 } void _changeLanguage(Locale locale) { setState(() { _locale = locale; Intl.defaultLocale = _locale.toLanguageTag(); // 선택한 언어로 Intl 패키지의 기본 로케일 변경 }); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Language Demo', localizationsDelegates: [ GlobalMaterialLocalizations.delegate, // flutter_localizations 패키지의 기본 로컬라이제이션 델리게이트 GlobalWidgetsLocalizations.delegate, // flutter_localizations 패키지의 기본 로컬라이제이션 델리게이트 ], supportedLocales: [ const Locale('en'), const Locale('ko'), ], locale: _locale, // 현재 선택된 언어 설정 home: Scaffold( appBar: AppBar( title: Text(AppLocalizations.of(context).title), // 지역화된 언어 문자열 사용 ), body: Center( child: Text(AppLocalizations.of(context).description), // 지역화된 언어 문자열 사용 ), floatingActionButton: FloatingActionButton( onPressed: () { _changeLanguage(const Locale('ko')); // 한국어로 언어 변경 }, child: Icon(Icons.language), ), ), ); } }
위 예시 코드에서는
_locale
변수를 이용하여 선택된 언어를 저장하고,Intl.defaultLocale
을 통해 Intl 패키지의 기본 로컬 값을 설정합니다._changeLanguage()
함수를 통해 언어를 변경하고, 변경된 언어에 맞게 앱의 언어가 업데이트 됩니다. -
지역화된 언어 문자열 사용하기 화면에 표시되는 문구를 지역화된 언어 문자열로 표시하기 위해서는
AppLocalizations
클래스를 사용해야 합니다. 다음은AppLocalizations
클래스의 구현 예시입니다.import 'package:flutter/material.dart'; class AppLocalizations { static AppLocalizations of(BuildContext context) { return Localizations.of<AppLocalizations>(context, AppLocalizations); } String get title { return Intl.message( 'Hello, World!', name: 'title', desc: 'Title', ); } String get description { return Intl.message( 'Welcome to my app.', name: 'description', desc: 'Description', ); } }
이제 앱의 어느 곳에서든
AppLocalizations.of(context).title
혹은AppLocalizations.of(context).description
을 사용하여 지역화된 언어 문자열을 표시할 수 있습니다. -
언어 변경 버튼 추가하기 이제 화면에 언어 변경을 위한 버튼을 추가하면 됩니다. 예시 코드에서는 FloatingActionButton을 이용하여 버튼을 추가했습니다.
위 예시 코드에서는 한국어로 언어를 변경하기 위해
_changeLanguage(const Locale('ko'))
를 호출했습니다. 필요에 따라 다른 언어로 변경하는 로직을 추가할 수 있습니다.
지역화 언어를 처리하는 방법을 소개했습니다. 이제 플러터 Intl을 사용하여 앱에서 다국어 지원을 할 수 있습니다.