[Fluter] Localization(L10n) 지원

25343 단어 Flutter Dart tech

작업 확인 환경

Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (5 weeks ago) • 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4

날과 씨

Flutter Lockalization 때는 공식 게시물intl을 도입할 때가 많았지만, 자체 조사를 할 때는 사이트마다 프로그램이 미묘하게 달라 혼란스러워 다시는 어리둥절하지 않도록 정리했다.

1단계 패키지 가져오기

1-1. pubspec.yaml에 추가 기술

Internationalizing Flutter apps 웹 사이트를 기반으로 Flutter 프로젝트pubspec.yaml에 추가

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations: # Add this line
    sdk: flutter         # Add this line

  intl: ^0.17.0          # Add this line

flutter:
  generate: true         # Add this line

요소 설명

flutter_localizations: 영어 이외의 언어에 해당하는 Localization용 패키지

intl: Localization 날짜 및 숫자 등을 위한 패키지

문장 제작 시간0.17.0이 최신이다.필요에 따라 version 덮어쓰기.

generate:generate 플래그

Localization 코드를 자동으로 생성할 때true Localization 코드가 없으면 error

가 됩니다.

1-2. flutter pub get

Fluter 프로젝트의 시작에서 두드리기flutter pub get를 하고 포장을 프로젝트에 포함시킨다.

두 번째 단계는 Localization용yaml을 만드는 거예요.

2-1. l10n.만들기

Fluter 프로젝트의 루트l10n.yaml에서 만듭니다.
(파라미터가 있는 두드리기flutter gen-l10n도 명령으로 생성할 수 있다)

2-2. l10n.yaml 기술

아래의 기술은 자신의 용도에 대한 변경 등이 있었기 때문에 후술한 설명과 함께 적절하게 개작하여 보존한다.
l10n.yaml

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: l10n.dart
output-class: L10n
synthetic-package: false

요소 설명

arb-dir: Localization을 통해 자동으로 생성되는 폴더 지정

arb는 애플 Resource Bundle의 줄임말

이다

default 값은 lib/l10n

template-arb-file: Localization을 통해 자동으로 생성된 파일의 원본 Resource 파일

default 값은 app_en.arb

output-localization-file: Localization 처리를 정의하는 파일 이름

default 값은 app_localizations.dart

default 값이면 긴 이름이기 때문에 l10n.dart 등 짧은 점으로 지정하는 것이 좋습니다

output-class: output-localization-file의 파일에서 자동으로 생성되고 정의된class명칭

default 값은 AppLocalizations

default 값이면 긴 이름이므로 L10n 등을 짧게 지정하는 것이 좋습니다

output-dir: Localization 코드를 자동으로 생성하는 폴더

default 값이 --arb-dir와 같은 폴더가 됨

--arb-dir와 같을 수 있기 때문에yaml에 기재하지 않았습니다

preferred-supported-locales:supportedLocales에서 첫 번째 언어를 지정할 수 있습니다

지정된 언어 없이 생성된 언어의 자모순

Localize가 터미널 언어를 지원하지 않을 경우 기본 언어로 지정

지정된 언어의 arb 파일에만 Localization 정의를 쓰면 자동으로 생성된 다른 언어의 파일에도 같은 내용이 기재됩니다

모든 언어에서 같은 문자열을 사용할 때 유용합니까?

synthetic-package: 코드 합성 패키지프로젝트용으로 지정된 폴더 생성 여부

default 값은 true

true때 합성 패키지가 생성된 것 같은데 사용해 본 적이 없어서 몰랐어요.

false일 때 output-dir 지정한 폴더에 Localization 코드를 생성합니다

세 번째 단계에서는 Localization용 폴더 및 정의를 만듭니다.

3-1. 폴더 만들기

두 번째 단계l10n.yaml에서 지정한 arb-dir의 위치, 이름으로 폴더를 만듭니다.

3-2. lib/l10n 파일 만들기

생성된 폴더에서 생성된 app_en.arb에 지정된 l10n.yaml 이름의 파일

3-3. template-arb-file에 기술

app_en.arb와 JSON의 묘사 형식은 기본적으로 같다.
app_en.arb

{
  "@@locale": "en",
  
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}

요소 설명

app_en.arb: 파일 처리의locale

locale를 위해서arb가 아니라@@locale

en: 프로젝트에서 LocalizeKey 호출

lowerCamelCase에서 설명

값en_US이 Localize에서 읽히기

helloWorld: Hello World!에 대한 모조

description, 매개 변수를 찾을 때의 유형, 형식 등을 지정할 수 있음

3-4. 코드 생성

Localization 코드를 생성하려면 @helloWorld를 클릭합니다.
이 설명과 생성 위치에 문제가 없으면 helloWorld의 내용을 바탕으로 Localization 파일을 생성합니다.

4단계 응용 프로젝트에서 생성된 코드

4-1. MaterialApp에 추가

기재flutter gen-l10n의l10n.yaml 및MaterialApp.
이 때 생성된 코드의 import도 잊지 않습니다.
main.dart

import 'package:flutter/material.dart';
+import 'package:new_project/l10n/l10n.dart';

...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
+      localizationsDelegates: L10n.localizationsDelegates,
+      supportedLocales: L10n.supportedLocales,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MaterialApp의 요소에 대한 설명

localizationsDelegates: Localization Widget용 delegate

supportedLocales 기반, Localization 처리 주위 부담

localizationsDelegates를 설명할 때supportedLocales도 필수적이다.

localizationsDelegates: Localization 지원 언어

Localization 코드 요소에 대한 설명

supportedLocales: Localization의 delegate를 하나로 정리

아래의 delegate가 포함되어 있기 때문에 이 줄만 쓰면 됩니다

supportedLocales

L10n.localizationsDelegates

L10n.delegate

GlobalMaterialLocalizations.delegate

GlobalCupertinoLocalizations.delegate: Localization 지원 언어

arb 파일로 정의된 언어를 바탕으로 코드가 자동으로 생성될 때 추가됨

※ 코드가 자동으로 생성되는class명을 GlobalWidgetsLocalizations.delegate로 설정한 경우 기재

4-2. Localization에서 생성된 코드 적용

L10n.supportedLocales에 instance를 만들어 LocalizeKey를 호출하여 Localization 이후의 텍스트를 호출합니다.
main.dart

...

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
+    final l10n = L10n.of(context)!;

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
+        child: Text(l10n.helloWorld),
      ),
    );
  }
}

Step5

5-1. L10n에 기재

자동으로 생성된 코드는 차분이 생기기 쉬워 제출 대상에 적합하지 않기 때문에 L10n.of(context)에서 설명하고 제출에서 제외합니다.
.gitignore

**/l10n/*.dart

5-2. .gitignore에서 제외 (lint에만 적용)

자동으로 생성된 코드를 lint을 대상으로 하면 수정할 수 없는 Warning이나 error가 나타날 수 있기 때문에 lint에서 제외됩니다.
analysis_options.yaml

analyzer:
  exclude:
    - '**/l10n/*.dart'

6 단계 추가 언어 추가

6-1. arb 파일 만들기

.gitignore의 analysis_options.yaml에 기재된 것과 같은 이름으로 추가할 언어의arb 파일을 만듭니다
일본어 Localize 추가의 경우 설명 및 제작l10n.yaml

template-arb-file 파일의 컨텐츠 복사app_ja.arb, 값을 일본어로 변경
app_ja.arb

{
  "@@locale": "ja",

  "helloWorld": "こんにちは世界！",
  "@helloWorld": {
    "description": "新米プログラマーの挨拶"
  }
}

6-2. iOS 프로젝트에 언어 추가

이 Fluter 프로젝트의 app_ja.arb 폴더에 있는 app_en.arb 를 Xcode로 엽니다.
왼쪽 열에서 ios를 선택하고 Runner.xcworkspace 키에 Info.plist를 추가합니다.Localizations 키가 존재하지 않을 때 Japanese를 누르면 키 자신을 추가합니다.)

6-3. 터미널 언어 설정 변경 및 확인

터미널 언어를 일본어로 설정하고 프로그램을 시작하면 Localize 화면이 표시되는지 확인하십시오!

7단계 영어 이외의 언어를 기본 언어로 설정

7-1. Localization에서 추기

응용 프로그램에서 터미널 언어가 Localize를 지원하지 않을 때 영어가 Localize이면 영어가 기본 언어가 된다.
영어에 Localize가 없으면 어떤 기준으로 기본 언어인지 알 수 없습니다.
일본어를 기본 언어로 설정할 경우 먼저 2-2단계+에 언어 코드l10n.yaml를 추가합니다.
l10n.yaml

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: l10n.dart
output-class: L10n
synthetic-package: false
+preferred-supported-locales: ja

7-2. MaterialApp에 추가

l10n.yaml에 preferred-supported-locales를 추가합니다.
콜백 처리에서 Localize가 만든 언어MaterialApp에 터미널 언어localeResolutionCallback가 포함되어 있는지 확인합니다.
이때 supportedLocales에 언어 코드 + 국가 코드가 포함되어 있기 때문에 언어 코드만 생성된 Locale instance를 비교합니다.
포함하면 그locale를 직접 반환합니다.
포함되지 않으면 locale의 첫 번째locale로 돌아갑니다.supportedLocales의 절차로 가장 먼저 오는 것을 설정한다localemain.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: L10n.localizationsDelegates,
      supportedLocales: L10n.supportedLocales,
+      localeResolutionCallback: (locale, supportedLocales) {
+        if (locale != null) {
+          final _locale = Locale(locale.languageCode);
+          if (supportedLocales.contains(_locale)) {
+            return _locale;
+          }
+        }
+        return supportedLocales.first;
+      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}