<div id="readability-page-1" class="page"><div>
 <a href="/m/category/Dev/Flutter">Dev/Flutter</a><h3>Flutter 다국어 지원 - Localization</h3>
 </div><cite>healthyryu</cite>
 2022. 4. 22. 14:37
 <div>
 <figure data-ke-mobilestyle="widthOrigin" data-filename="000.jpg" data-origin-width="2720" data-origin-height="1225">
 
 <img src="https://k.kakaocdn.net/dn/bkyz1o/btrAaOxt37i/a2r1foNj24DXVkenT4aRok/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="521" height="235" data-filename="000.jpg" data-origin-width="2720" data-origin-height="1225">
 
 
</figure>
<h4 data-ke-size="size20">Flutter 다국어 지원, Flutter Localization&nbsp;등으로 검색하면 많은 자료가 나옵니다.</h4>

<h3 data-ke-size="size23">&nbsp;참고자료&nbsp;</h3>
1. 기본적으로 참고해야하는 자료는 공식 문서
- <a href="https://docs.flutter.dev/development/accessibility-and-localization/internationalization" target="_blank" rel="noopener">https://docs.flutter.dev/development/accessibility-and-localization/internationalization</a>
하지만 영어가 익숙하지 않다보니 공식문서만 보면 이해가 잘 되지 않아서 다른 한글 자료 및 영상 자료를 추가로 참고.

2. 유튜브 영상
- <a href="https://youtu.be/Zw4KoorVxgg" target="_blank" rel="noopener">https://youtu.be/Zw4KoorVxgg</a>
상세하게 순서 등 다 나오다보니 감사하게 공식 문서와 함께 참고.


<h3 data-ke-size="size23">&nbsp;다국어 지원 절차&nbsp;</h3>
1. 라이브러리 추가
&nbsp; - pubspec.yaml 파일에 추가 &nbsp; &nbsp; a. dependencies 에 flutter_localizations, intl 추가
&nbsp; &nbsp; b. flutter 에 generate 추가
<pre id="code_1650598154623" data-ke-language="bash" data-ke-type="codeblock"><code>dependencies:
 flutter:
 sdk: flutter
 flutter_localizations:
 sdk: flutter
 intl: ^0.17.0

....

flutter:
 generate: true</code></pre>

2. YAML 파일 새롭게 추가
&nbsp; - l10n.yaml 루트 경로
<pre><code>arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart</code></pre>

3. lib 경로 아래에 다국어 관련 폴더, 파일 추가
&nbsp; - lib/l10n 경로 추가
&nbsp; - l10n.dart 추가
<pre id="code_1650599161619" data-ke-language="java" data-ke-type="codeblock"><code>class L10n {
 static final all = [
 const Locale('en'),
 const Locale('ko'),
 ];
}</code></pre>
&nbsp; - json 형태로 app_en.arb, app_ko.arb 파일 추가
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-04-22 오후 12.46.58.png" data-origin-width="159" data-origin-height="86">
 
 <img src="https://k.kakaocdn.net/dn/bSxteR/btrz5xptet3/SzRZLJYkkrIkr9SUH2xAOk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="211" height="114" data-filename="스크린샷 2022-04-22 오후 12.46.58.png" data-origin-width="159" data-origin-height="86">
 
 
</figure>
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a>더보기</a><div>
app_en.arb
<pre data-ke-language="java"><code>{
 "language": "English",
 "@language": {
 "description": "The current Language"
 },

 "menu": "Menu",
}</code></pre>
app_ko.arb
<pre data-ke-language="java"><code>{
 "language": "한글",
 "@language": {
 "description": "현재 언어"
 },

 "menu": "메뉴",
}</code></pre>
</div>
</div>

4. 빌드하기
&nbsp; - flutter generate 설정을 true 했기 때문에 빌드하면 &nbsp;.dart_tool/flutter_gen&nbsp; 폴더 아래에 l10n 관련한 localiaztions 파일들이 생성된다.
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-04-22 오후 2.18.25.png" data-origin-width="304" data-origin-height="165">
 
 <img src="https://k.kakaocdn.net/dn/bZIMZy/btrz8DJHTdh/KoVuToKT0WKzU7Gfd3TPjK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="405" height="220" data-filename="스크린샷 2022-04-22 오후 2.18.25.png" data-origin-width="304" data-origin-height="165">
 
 
</figure>

5. main.dart 파일에 다국어 설정
&nbsp; - supportedLocaled 에 전에 만든 지원할 언어 추가
&nbsp; - localizationsDelegates 추가
<pre id="code_1650604550614" data-ke-language="java" data-ke-type="codeblock"><code>class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 NotificationApi.init(initScheduled: true);

 return MaterialApp(
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 supportedLocales: L10n.all,
 localizationsDelegates: const [
 AppLocalizations.delegate,
 GlobalMaterialLocalizations.delegate,
 GlobalCupertinoLocalizations.delegate,
 GlobalWidgetsLocalizations.delegate,
 ],
 home: Home());
 }
}</code></pre>
참고로 IDE 를 사용할 경우에 특정 클래스가 존재하면 해당 클래스 이름을 쓰면 자동으로 import 를 추천하는데 AppLocalizations 는 자동으로 뜨지 않아서 직접 경로를 추가했다.
<pre><code>import 'package:flutter_gen/gen_l10n/app_localizations.dart';</code></pre>

6. 사용하기
&nbsp; - 현재 블로그에서는 language, menu 만 추가했기 때문에 두가지만 사용 가능
<pre id="code_1650605609707" data-ke-language="java" data-ke-type="codeblock"><code>AppLocalizations.of(context).language;
AppLocalizations.of(context).menu;</code></pre>
 
 
 </div></div>

대부류 - [Dev u Ryu]

류지훈

Flutter 다국어 지원, Flutter Localization 등으로 검색하면 많은 자료가 나옵니다.
 
 참고자료 
1. 기본적으로 참고해야하는 자료는 공식 문서
- https://docs.flutter.dev/development/accessibility-and-localization/internationalization
하지만 영어가 익숙하지 않다보니 공식문서만 보면 이해가 잘 되지 않아서 다른 한글 자료 및 영상 자료를 추가로 참고.
 
2. 유튜브 영상
- https://youtu.be/Zw4KoorVxgg
상세하게 순서 등 다 나오다보니 감사하게 공식 문서와 함께 참고.
 
 
 다국어 지원 절차 
1. 라이브러리 추가
  - pubspec.yaml 파일에 추가
    a. dependencies 에 flutter_localizations, intl 추가
    b. flutter 에 generate 추가
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0
....
flutter:
  generate: true
 
2. YAML 파일 새롭게 추가
  - l10n.yaml 루트 경로
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
 
3. lib 경로 아래에 다국어 관련 폴더, 파일 추가
  - lib/l10n 경로 추가
  - l10n.dart 추가
class L10n {
 static final all = [
   const Locale('en'),
   const Locale('ko'),
 ];
}
  - json 형태로 app_en.arb, app_ko.arb 파일 추가
더보기
app_en.arb
{
  "language": "English",
  "@language": {
    "description": "The current Language"
  },
  "menu": "Menu",
}
app_ko.arb
{
  "language": "한글",
  "@language": {
    "description": "현재 언어"
  },
  "menu": "메뉴",
}
 
4. 빌드하기
  - flutter generate 설정을 true 했기 때문에 빌드하면  .dart_tool/flutter_gen  폴더 아래에 l10n 관련한 localiaztions 파일들이 생성된다.
 
5. main.dart 파일에 다국어 설정
  - supportedLocaled 에 전에 만든 지원할 언어 추가
  - localizationsDelegates 추가
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    NotificationApi.init(initScheduled: true);
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        supportedLocales: L10n.all,
        localizationsDelegates: const [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        home: Home());
  }
}
참고로 IDE 를 사용할 경우에 특정 클래스가 존재하면 해당 클래스 이름을 쓰면 자동으로 import 를 추천하는데 AppLocalizations 는 자동으로 뜨지 않아서 직접 경로를 추가했다.
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
6. 사용하기
  - 현재 블로그에서는 language, menu 만 추가했기 때문에 두가지만 사용 가능
AppLocalizations.of(context).language;
AppLocalizations.of(context).menu;

Flutter 다국어 지원 - Localization

댓글