[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, // 다국어 사용
      ),
    );
  }
}