[flutter] 플러터 훅 위젯을 활용한 다국어 지원 방법

21 Dec 2023

flutter

서론

앱을 국제 시장에 출시한다면 다국어 지원은 필수적인 요소입니다. 플러터(Flutter)의 편리한 훅(Hook) 위젯을 활용하여 앱 내에서 간단하게 다국어를 지원하는 방법에 대해 알아보겠습니다.

1. 다국어 지원 라이브러리 추가

먼저, flutter_localizations 의존성을 pubspec.yaml 파일에 추가합니다.

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

그런 다음, MaterialApp 위젯을 래핑하여 지원할 로캘(언어 및 지역)을 설정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:my_app/generated/l10n.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      // ...
    );
  }
}

2. 다국어 문구 관리

앱 내에서 다국어로 표시할 문자열을 효과적으로 관리하기 위해 arb 파일 포맷을 사용합니다.

다음은 lib/l10n/intl_en.arb 파일의 예시입니다.

{
  "@@locale": "en",
  "greeting": "Hello, World!",
  "button_text": "Click Me",
  ...
}

3. 다국어 문자열 호출

이제, 앱 내에서 문자열을 호출할 때, 간편하게 훅(Hook) 위젯을 사용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:my_app/generated/l10n.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(MyAppLocalizations.of(context)!.greeting),
          ElevatedButton(
            onPressed: () {
              // ...
            },
            child: Text(MyAppLocalizations.of(context)!.buttonText),
          ),
        ],
      ),
    );
  }
}

결론

플러터의 훅(Hook) 위젯과 flutter_localizations 라이브러리를 활용하여, 앱의 다국어 지원을 간단히 구현할 수 있습니다. 이를 통해 다양한 사용자들에게 더 나은 앱 경험을 제공할 수 있습니다.

위 문서는 Flutter 공식 문서를 참고하여 작성되었습니다.