콘텐츠로 바로 가기
Flutter i18n

Flutter i18n: 하나의 코드베이스로 모든 언어, 모든 플랫폼

Flutter는 ARB(Application Resource Bundle) 파일과 intl 패키지를 사용하여 단일 코드베이스에서 iOS, Android, 웹, 데스크톱 전반의 현지화를 처리합니다. gen-l10n 도구는 ARB 템플릿에서 타입 안전한 Dart 코드를 생성하여 모든 번역 키에 대해 컴파일 타임 안전성과 IDE 자동 완성을 제공합니다.

Get started in 4 steps

1

Enable generation

Add the generate flag to your pubspec.yaml to enable localization code generation.

pubspec.yaml
# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true
2

Configure l10n.yaml

Create l10n.yaml in your project root to configure the localization generator.

l10n.yaml
# l10n.yaml
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
3

Create ARB template

Add your source language ARB file with translation keys and metadata.

lib/l10n/app_en.arb
{
  "@@locale": "en",
  "welcome": "Welcome to {appName}",
  "@welcome": {
    "placeholders": {
      "appName": { "type": "String" }
    }
  },
  "itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
  "@itemCount": {
    "placeholders": {
      "count": { "type": "int" }
    }
  }
}
4

Use in your app

Wrap your app with localization delegates and use AppLocalizations.of(context) in widgets.

lib/main.dart
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Text(l10n.welcome('Flutter'));
  }
}

Flutter 현지화 기능

메타데이터 지원을 포함한 ICU MessageFormat 구문의 ARB 파일 형식
타입 안전 번역을 위한 gen-l10n을 통한 자동 Dart 코드 생성
컴파일 타임 검증을 포함한 ICU 복수형 및 선택 규칙
iOS, Android, 웹, 데스크톱을 위한 단일 코드베이스 현지화
개발 중 즉각적인 번역 미리보기를 위한 핫 리로드 지원
날짜, 텍스트 방향, 접근성을 위한 Material 및 Cupertino 위젯 현지화
자동 텍스트 및 위젯 정렬을 포함한 RTL(오른쪽에서 왼쪽) 레이아웃 지원
intl 패키지를 통한 로케일 인식 날짜, 숫자, 통화 형식 지정
AppLocalizations.of(context)를 사용한 BuildContext 기반 로케일 접근

Flutter 현지화 실습

AppLocalizations.of(context)를 사용하여 위젯에서 생성된 번역 메서드에 접근하세요. 복수형 및 날짜 형식 지정을 완전히 지원합니다.

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class ProductPage extends StatelessWidget {
  final int itemCount;
  const ProductPage({required this.itemCount});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Column(
      children: [
        Text(l10n.welcome('My Store')),
        Text(l10n.itemCount(itemCount)),
        // Date formatting respects locale
        Text(DateFormat.yMMMd(
          Localizations.localeOf(context).toString()
        ).format(DateTime.now())),
      ],
    );
  }
}

오늘 Flutter 현지화를 간소화하세요

AI 기반 워크플로우, Flutter 프로젝트에 대한 CLI 동기화, 50ms 미만의 CDN 전달로 ARB 번역을 관리하세요.