프로그램/FLUTTER

[Flutter] 플러터 다국어 세팅 및 설정 easy_localization

프뚜 2023. 8. 29. 14:07
728x90
반응형
SMALL

안녕하세요! 프뚜입니다.

플러터에서 다국어 처리하는 방법에 대해 포스팅합니다.


OS: Windows 10

Dart: Dart SDK version: 3.0.6 (stable) (Tue Jul 11 18:49:07 2023 +0000) on "windows_x64"

Flutter: Flutter 3.10.6


# easy_localization 설치하기

flutter pub add easy_localization

플러터 프로젝트 경로로 이동 후 터미널에 위 명령어를 실행합니다.

 

pubspec.yaml에 추가됨을 확인할 수 있습니다.


# assets에 파일 추가하기

./assets/translations/en-US.json
./assets/translations/ko-KR.json

폴더 생성 및 파일을 생성합니다.

 

한국어, 영어 등 필요한 언어를 추가하시면 됩니다.

 

{
  "name": "프뚜",
  "nameObject": {
    "object1": "오브젝트1",
    "object2": "오브젝트2"
  },
  "args": "{name} !"
}

name과 object, args를 받을 수 있는 값들을 생성합니다.


# assets 경로 추가하기

...
flutter:
  assets:
    - assets/translations/
...

./pubspec.yaml에 assets 경로를 추가합니다.

 


# main.js에 언어 세팅하기

// 2023.08.25[프뚜]: 언어 리스트
final supportedLocales = [
  const Locale('en', 'US'),
  const Locale('ko', 'KR'),
];

void main() async {
  // 2023.08.25[프뚜]: 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  // 2023.08.25[프뚜]: 언어 연결
  runApp(EasyLocalization(
      supportedLocales: supportedLocales,
      path: 'assets/translations',
      fallbackLocale: const Locale('ko', 'KR'),
      child: const MainView()));
}

class MainView extends StatelessWidget {
  const MainView({super.key});

  @override
  Widget build(BuildContext context) {
    // 2023.08.25[프뚜]: 언어 연결
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: Container(
        alignment: Alignment.center,
        color: Colors.white,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('name'.tr()),
            Text('nameObject'.tr(gender: 'object1')),
            Text('nameObject'.tr(gender: 'object2')),
            Text('args'.tr(namedArgs: {'name': 'pddu'})),
          ],
        ),
      ),
    );
  }
}

언어 리스트 변수를 생성하고 EasyLocalization에 연결합니다. 이후 MaterialApp에 locale 정보들을 연동합니다.

 


플러터 다국어 처리를 할 수 있는 라이브러리 세팅 및 사용 방법에 대해 포스팅되었습니다.

728x90
반응형
LIST