[flutter] easy_localization을 활용한 앱 내 소셜 미디어 공유 기능 지역화

14 Dec 2023

flutter

본 문서에서는 Flutter 앱의 소셜 미디어 공유 기능을 easy_localization 패키지를 사용하여 지역화하는 방법에 대해 다룹니다.

소셜 미디어 공유 기능 추가하기

먼저, 앱에 소셜 미디어 공유 기능을 추가해야 합니다. 아래는 간단한 예시 코드입니다.

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

void shareOnSocialMedia(String text, String url) async {
  var whatsappUrl = "whatsapp://send?text=$text $url";
  if (await canLaunch(whatsappUrl)) {
    await launch(whatsappUrl);
  } else {
    throw 'Could not launch $whatsappUrl';
  }
}

class ShareButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        shareOnSocialMedia("Check out this cool app!", "https://example.com");
      },
      child: Text('Share on WhatsApp'),
    );
  }
}

easy_localization 패키지 설치 및 설정

이제 easy_localization 패키지를 사용하여 앱을 지역화합니다. 먼저, pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  easy_localization: <latest_version>

그리고 다음과 같이 main.dart 파일에서 EasyLocalization 위젯을 추가합니다.

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

{
  "share_text": "Check out this cool app!"
}

ko.json

{
  "share_text": "이 멋진 앱을 확인해보세요!"
}

지역화된 텍스트 사용하기

마지막으로, 소셜 미디어 공유 기능에서 지역화된 텍스트를 사용합니다.

class ShareButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        shareOnSocialMedia(tr('share_text'), "https://example.com");
      },
      child: Text(tr('share_button_text')),
    );
  }
}

위와 같이, tr 메소드를 사용하여 현재 선택된 로케일에 따라 올바른 텍스트가 표시됩니다.

이제 지역화된 소셜 미디어 공유 기능을 가진 Flutter 앱을 만들었습니다. 다양한 언어로 앱을 제공함으로써 사용자들이 더욱 편리하게 앱을 이용할 수 있게 되었습니다.

더 많은 내용을 보려면 easy_localization 공식 문서를 참고하세요.