[flutter] FloatingActionButton을 사용하여 다국어 지원 기능 구현하기

다국어 지원은 앱이 다양한 언어를 지원하여 사용자들이 자신의 언어로 앱을 이용할 수 있도록 하는 중요한 기능입니다. Flutter에서는 이를 위해 다양한 패키지와 기능을 제공하고 있습니다. 이번 글에서는 Flutter 앱에서 FloatingActionButton을 사용하여 간단한 다국어 지원 기능을 구현하는 방법에 대해 알아보겠습니다.

다국어 지원 설정

우선, Flutter 앱에서 다국어 지원을 설정해야 합니다. 이를 위해서는 pubspec.yaml 파일에 flutter_localizations 패키지를 추가해야 합니다. 이 패키지를 이용하면 앱에 여러 언어를 추가하고 일치하는 지역 설정에 따라 적절한 언어로 앱을 표시할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

그런 다음, 앱의 MaterialApp 위젯에서 localizationsDelegatessupportedLocales를 설정해야 합니다.

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // 영어
    const Locale('ko', ''), // 한국어
  ],
  // ...
)

FloatingActionButton 다국어 지원 구현

이제 FloatingActionButton 위젯을 다국어 지원 기능으로 변경해보겠습니다. 먼저, intl 패키지를 이용하여 현재 지역 설정에 따른 언어를 가져올 수 있습니다.

import 'package:intl/intl.dart';

String _getFloatingActionButtonText(BuildContext context) {
  return Intl.message(
    'Add',
    name: 'addText',
    desc: 'Text on the floating action button for adding an item',
    locale: Localizations.localeOf(context).languageCode,
  );
}

그리고 FloatingActionButton 위젯에서 이 함수를 호출하여 텍스트를 설정할 수 있습니다.

FloatingActionButton(
  onPressed: () {
    // 눌렀을 때의 동작
  },
  tooltip: 'Add', // 기본 값
  child: Icon(Icons.add),
  heroTag: null,
  child: Text(_getFloatingActionButtonText(context)),
)

이렇게하면, 사용자의 언어 설정에 따라 FloatingActionButton의 텍스트가 자동으로 변경됩니다.

결론

이제 Flutter 앱에서 FloatingActionButton을 사용하여 간단한 다국어 지원 기능을 구현하는 방법을 알아보았습니다. 이를 통해 사용자들이 자신의 언어로 앱을 이용할 수 있어서 더 나은 사용자 경험을 제공할 수 있습니다. Flutter의 다양한 다국어 지원 기능을 효과적으로 활용하여 앱을 국제적으로 확장시키는 것이 중요합니다.

참고: Flutter Internationalization


본 포스팅은 Flutter 다국어 지원과 관련된 기본적인 기능을 다루고 있습니다. 보다 심화된 다국어 지원 구현 방법에 대해서는 Flutter 공식 문서와 추가 자료를 참고하시기 바랍니다.