[flutter] 플러터 프로바이더를 이용한 국제화(Internationalization)

14 Dec 2023

flutter

플러터(Flutter) 앱을 국제화하는 것은 다국어 사용자에게 적합한 앱을 제공하는 데 중요한 요소입니다. 이 문서에서는 플러터 provider 라이브러리를 사용하여 국제화를 구현하는 방법에 대해 알아보겠습니다.

1. 국제화 지원 준비

먼저, 앱에서 사용할 수 있는 다국어 지원을 위해 flutter_localizations 패키지와 provider 패키지를 프로젝트에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0
  flutter_localizations:
    sdk: flutter
  # 다국어 지원을 위한 추가 패키지
  # 각 국가 및 지역에 대한 언어 및 지역화 데이터 제공
  intl: ^0.17.0

2. 언어 및 지역화 데이터 추가

다음으로, 앱에서 사용할 언어 및 지역화 데이터를 추가해야 합니다. 이를 위해 flutter_localizations 패키지를 사용하여 지원할 언어와 해당 지역화 정보를 등록해야 합니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      supportedLocales: [
        const Locale('en', 'US'), // 영어 (미국)
        const Locale('ko', 'KR'), // 한국어 (대한민국)
        // 추가적으로 지원할 언어 및 지역을 등록할 수 있습니다.
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        // 추가적으로 지원할 다른 지역화 델리게이트를 등록할 수 있습니다.
      ],
      home: MyHomePage(),
    );
  }
  // ...
}

3. Provider 패턴을 활용한 다국어 지원

이제 provider 패턴을 사용하여 앱에서 다국어를 지원할 수 있습니다. 다국어 데이터 및 변경 로직을 관리하기 위해 ChangeNotifier 클래스를 사용합니다.

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

class LanguageNotifier extends ChangeNotifier {
  Locale _locale = Locale('en', 'US');

  Locale get locale => _locale;

  void setLanguage(Locale newLocale) {
    _locale = newLocale;
    notifyListeners();
  }
}

4. 다국어 데이터 사용

위에서 생성한 LanguageNotifier를 사용하여 다국어 데이터를 앱 내에서 사용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'language_notifier.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final languageNotifier = Provider.of<LanguageNotifier>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Internationalization Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              // 지정된 언어에 따라 다른 텍스트를 표시합니다.
              Intl.message('Hello', name: 'helloMessage', args: [], locale: languageNotifier.locale.languageCode),
              style: TextStyle(fontSize: 20),
            ),
            // 지원할 언어 및 지역을 선택할 수 있는 버튼
            ElevatedButton(
              onPressed: () {
                languageNotifier.setLanguage(Locale('en', 'US'));
              },
              child: Text('English'),
            ),
            ElevatedButton(
              onPressed: () {
                languageNotifier.setLanguage(Locale('ko', 'KR'));
              },
              child: Text('한국어'),
            ),
          ],
        ),
      ),
    );
  }
}

마치며

플러터 provider 라이브러리를 사용하여 국제화를 구현하는 방법에 대해 배워보았습니다. provider 패턴을 활용하여 언어 및 지역화 데이터를 관리하고, 다국어를 지원하는 방법을 학습했습니다. 이를 통해 여러 언어 및 지역에 대해 사용자 친화적인 앱을 개발할 수 있게 되었습니다.

참고 자료

Flutter Internationalization