티스토리 뷰

지식쌓기

Flutter Localization

바나나쥬스 2021. 2. 19. 11:19

아래 개발페이지에 있는것을 쉽게 설명

https://flutter.dev/docs/development/accessibility-and-localization/internationalization

1.pubspec.xml 파일 dependencies 및 설정 추가

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 추가
    sdk: flutter         # 추가
  intl: ^0.16.1          # 추가

flutter:
  generate: true         # 추가

2. 소스 추가   (나중엔 import문과 localizationsDelegates, supportedLocales 부분을 수정할 것이다)

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
   GlobalCupertinoLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', ''),
    const Locale('ko', ''),
    // 그외 언어들은 개발페이지 보고 추가할거 추가
  ],
  // ...
)

3. l10n.yaml  파일 생성 (프로젝트 루트 아래) 

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

supportedLocales에 추가하지 않은 언어의 경우 app_en.arb 가 기본으로 사용되는 걸로 보인다

 

4. lib/l10n 폴더 안에 app_en.arb 파일 생성

{
  "hello": "Hello",
  "@hello": {
    "description": "The conventional newborn programmer greeting"
  }
}

문자열 키를 하나 정의 하면 대표파일에 '@'를 포함한 같은 키가 있어야 한다. (없으면 컴파일에러) "description" 은 정의하지 않아도 무관

콤마 잘써야함, 마지막라인엔 콤마 쓰면안됨

 

5. 그외 언어도 파일 만들어 정의, 추가된 언어파일에는 '@'정의 하지 않아도됨

app_ko.arb

{
  "hello": "안녕"
}

 

6. 이렇게 까지 하고 실행을 하면 아래폴더에 파일들이 생성된다

${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n.

${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n.

 

7. 파일이 정상적으로 생성되면 app 코드를 수정

// import 'package:flutter_localizations/flutter_localizations.dart';  << 제거
// 아래 import문 추가
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 

MaterialApp(
 // 기존꺼 제거
 // localizationsDelegates: [
 //   GlobalMaterialLocalizations.delegate,
 //   GlobalWidgetsLocalizations.delegate,
 //   GlobalCupertinoLocalizations.delegate,
 //  ],
 // supportedLocales: [
 //   const Locale('en', ''),
 //   const Locale('ko', ''),
 //   const Locale.fromSubtags(languageCode: 'zh'), // Chinese *See Advanced Locales below*
 //   // ... other locales the app supports
 // ],
  // ...

  // 아래꺼로 사용
	localizationsDelegates: AppLocalizations.localizationsDelegates,
	supportedLocales: AppLocalizations.supportedLocales,
)

 

8. 문자 사용시 아래처럼 사용

AppLocalizations.of(context).hello

 

이후부터는 언어를 추가할때 app_xx.arb 파일만 추가하면 됨