[flutter] easy_localization을 통한 앱의 지역화된 낚시/낚시 툴 안내 기능

14 Dec 2023

flutter

서론

안녕하세요! 이번에는 Flutter 앱에서 easy_localization 라이브러리를 사용하여 어플리케이션을 지역화하고, 낚시/낚시 툴 안내 기능을 구현하는 방법에 대해 알아보겠습니다. easy_localization은 Flutter 앱의 다국어 지원을 쉽게 할 수 있도록 해주는 편리한 라이브러리로, 앱에서 원하는 언어로 텍스트를 쉽게 전환할 수 있게 합니다. 이 튜토리얼에서는 easy_localization을 사용하여 Flutter 앱을 한국어와 영어로 지역화하고, 낚시와 낚시 툴에 대한 안내 기능을 추가해 보겠습니다.

easy_localization 설정

먼저, pubspec.yaml 파일에 easy_localization 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0

그리고 실행 중인 앱에 다양한 언어 지원을 위해 main.dart 파일에 다음과 같이 easy_localization을 설정합니다.

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';

void main() {
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('ko', 'KR')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage(),
    );
  }
}

이제 앱이 한국어 및 영어를 지원하고, 지역화된 텍스트를 불러올 수 있도록 설정되었습니다.

나라별 지역화된 낚시 기능 추가

이제 앱에 지역화된 낚시 기능을 추가해 보겠습니다. assets/translations 경로에 en.json 및 ko.json 파일을 생성하고, 텍스트를 추가합니다.

en.json

{
  "fishing": {
    "title": "Fishing",
    "description": "Enjoy the tranquility of fishing at a peaceful lake."
  }
}

ko.json

{
  "fishing": {
    "title": "낚시",
    "description": "평화로운 호수에서 낚시의 평온을 즐기세요."
  }
}

데이터 모델을 생성하여 지역화된 텍스트를 표시하는 간단한 위젯을 구성합니다.

class FishingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('fishing.title'.tr(), style: TextStyle(fontSize: 20)),
        SizedBox(height: 10),
        Text('fishing.description'.tr(), textAlign: TextAlign.center),
      ],
    );
  }
}

위젯을 추가한 후, 지역화된 낚시 기능이 앱에서 올바르게 작동하는지 확인합니다.

나라별 지역화된 낚시 툴 추가

마지막으로, 낚시 툴에 대한 나라별 지역화된 안내 기능을 추가해 봅시다.

class FishingToolWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('fishing_tool.title'.tr(), style: TextStyle(fontSize: 20)),
        Image.asset('assets/images/fishing_tool_${context.locale.languageCode}.png'),
        Text('fishing_tool.description'.tr(), textAlign: TextAlign.center),
      ],
    );
  }
}

assets/images 폴더에 각 언어에 해당하는 낚시 툴 이미지를 저장한 후, 해당 이미지를 표시하는 기능을 추가합니다.

결론

이제 easy_localization을 사용하여 Flutter 앱을 다언어로 지역화하고, 나라별 지역화된 낚시/낚시 툴 안내 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 다언어 지원 기능을 가진 앱을 보다 쉽게 개발할 수 있을 것입니다.

참조: easy_localization 라이브러리