플러터 앱 다국어 기능 설정하는법

플러터 앱 다국어 기능 설정하는법

 

안녕하세요.

이번에 플러터로 앱을 개발하고 있습니다. ㅎㅎ

다국어를 지원하면 좋을거 같아서 다국어 기능을 넣어봤는데요.

SpringBoot에서 다국어 지원하는 것과 유사하게 동작을 하더라구요.

아래에 그 내용을 정리해보겠습니다.

 

 

먼저 결과부터 보여드리겠습니다.

앱화면에서 언어를 선택하는 버튼이 있고 그 버튼을 클릭하면 자동으로 번역이 됩니다.

 

• pubspec.lock 빼고 총 6개 파일만 추가하고 수정했네요

 

1. 플러그인 설치

• file - settings 클릭

 

• Pulgins에서 Flutter intl 검색 후 Install 클릭

 

• 설치가 완료되면 Restart IDE

 

2. pubspec.yaml 파일

• pubspec.yaml 파일에서 intl 의존성 추가
• 좀더 아래쪽에 generate: true추가

 

 

3. 다국어 설정 파일 - arb 생성

• 다국어는 번역을 하여 직접 세팅해야합니다.
• 하나의 언어마다 하나의 파일을 생성하면 됩니다.
• 저는 일단 한국어와 영어만 설정했네요.

 

• lib 디렉토리 하위에 'l10n' 디렉토리 생성
• 'l10n' 디렉토리 하위에 app_ko.arb 파일 생성
• 'l10n' 디렉토리 하위에 app_en.arb 파일 생성

 

• 화면에서 사용하는 텍스트들을 한국어, 영어 각각 만들어줍니다.

 

 

4. l10n.yaml 파일 생성

• 프로젝트 root에 'l10n.yaml'파일 생성후 내용추가

 

5. main.dart 코드 생성

• main.dart 파일에 아래 import
• flutter_localization으로 자동화된 다국어 로딩을 지원한답니다.

 

• 아래도 세팅해주고 터미널에서 flutter pub get을 해주면 빨간색 밑줄이 사라집니다.

 

6. 번역이 필요한 화면 - 언어 설정 버튼 생성

• 아래 내용을 추가해줍니다.

 

텍스트가 필요한 부분을 모조리 아래처럼 변경해줘야합니다.

 

수정 전: Text('오늘의 비주얼', style: AppStyle.titleStyle)

수정 후: Text(AppLocalizations.of(context)!.title, style: AppStyle.titleStyle),

그리고 우측에 주석을 달아놓으면 다음에 코드보고 찾아가기 쉽습니다.

 

7. arb 추가 및 수정시 적용사항

• arb 파일에 내용을 추가하거나 수정한 후에도 터미널에서 아래 명령어 입력해야 합니다.
• flutter pub run intl_utils:generate

 

SpringBoot에서 다국어를 사용하고 있기 때문에 내용 파악하는데는 수월했네요.

알고나면 생각보다 간단합니다.

dart언어가 어려운건 비밀..

 

고생하셨습니다~