[flutter] flutter_localizations 다국어 적용하는 방법
플러터 flutter_localizations 다국어 적용하는 방법
플러터에서 사용자의 언어 설정에 따른 다국어를 적용하는 방법에 대해 알아보겠습니다.
다국어 패키지 설치
우선 flutter_localizations 패키지를 설치하기 위해 아래 명령어를 실행합니다.
$ flutter pub add flutter_localizations --sdk=flutter
$ flutter pub add intl:any
패키지 설치가 끝나고 pubspec.yaml 파일을 열어보면 아래와 같이 필요한 패키지가 설치된 것을 확인할 수 있습니다.
dependencies:
flutter:
sdk: flutter
flutter_localizations: # 다국어 패키지
sdk: flutter
intl: any # 포맷 패키지
그러고 나서 pubspec.yaml 파일에 아래와 같이 generate: true 값을 추가합니다.
flutter:
uses-material-design: true
generate: true
l10n.yaml 파일 생성
이제 다국어 구성 파일인 l10n.yaml 파일을 프로젝트의 루트 경로에 생성하고 아래 코드를 추가합니다.
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
언어 파일 생성
마지막으로 지역별 언어를 정의하기 위해 lib/l10n/ 위치에 app_en.arb, app_ko.arb와 같이 앱에서 사용할 언어 파일을 만듭니다.
// lib/l10n/app_en.arb
{"hello": "Hello."}
// lib/l10n/app_ko.arb
{"hello": "안녕하세요."}
다국어 사용
다국어 적용을 위한 준비가 끝났습니다. 이제 앱 화면에 어떻게 적용하는지 알아보겠습니다.
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart'; // Add this line
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Add this line
...
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Localization Tutorial',
debugShowCheckedModeBanner: false,
localizationsDelegates: const [
AppLocalizations.delegate, // Add this line
GlobalMaterialLocalizations.delegate, // Add this line
GlobalWidgetsLocalizations.delegate, // Add this line
GlobalCupertinoLocalizations.delegate, // Add this line
],
supportedLocales: const [
Locale('en'),
Locale('ko'),
],
theme: Themes.light,
darkTheme: Themes.dark,
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Text(
AppLocalizations.of(context)!.hello, // 다국어 사용
),
);
}
}
반응형
'주제 > flutter' 카테고리의 다른 글
[flutter] 새로운 앱 만들때 패키지 이름 설정하는 방법 (0) | 2023.04.20 |
---|---|
[flutter] firebase_auth + sign_in_with_apple 애플 로그인 방법 (1) | 2023.03.31 |
[flutter] ios splash screen, launch screen 적용하는 방법 (0) | 2023.03.27 |
[flutter] No app has been configured yet. 오류 해결 방법 (0) | 2023.03.27 |
[flutter] ios에서 구글 로그인 오류 our app is missing support for the following URL schemes 해결 방법 (0) | 2023.03.17 |