Colin's Blog
[flutter] Riverpod를 사용하여 앱의 다국어 지원하는 방법은 어떻게 되나요?

이 글에서는 Riverpod를 사용하여 Flutter 앱에서 다국어 지원을 구현하는 방법에 대해 설명하도록 하겠습니다.

1. 다국어 지원을 위한 패키지 설치

먼저, 다국어 지원을 위해 flutter_localizations 패키지를 설치해야 합니다. 이 패키지는 Flutter 앱에서 다국어 지원을 위한 로컬화 기능을 제공합니다.

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

pubspec.yaml 파일에 위와 같이 의존성을 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 가져옵니다.

2. 다국어 리소스 파일 생성

다국어 지원을 위해 lib/l10n 폴더를 만들고, 해당 폴더에 app_localizations.dart 파일을 생성합니다. 이 파일은 로컬화를 위한 리소스를 제공합니다.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class AppLocalizationsDelegate
    extends LocalizationsDelegate<AppLocalizations> {
  @override
  bool isSupported(Locale locale) =>
      ['en', 'ko'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) =>
      AppLocalizations.load(locale);

  @override
  bool shouldReload(LocalizationsDelegate<AppLocalizations> old) => false;
}

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) async {
    final String name =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();

    final String localeName = Intl.canonicalizedLocale(name);

    await S.load(Locale(localeName));

    return AppLocalizations();
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

  String get hello {
    return S.hello;
  }
}

위의 코드는 로컬화를 위한 기본적인 설정이 들어있는 AppLocalizations 클래스입니다. 여기에서 앱에서 사용할 언어를 지정하고, 로컬화된 문자열을 얻을 수 있습니다.

3. 로컬화 리소스 파일 생성

다국어 지원을 위해 lib/l10n 폴더에 app_localizations.arb 파일을 생성합니다. 이 파일은 로컬화된 문자열을 포함하고 있습니다.

예를 들어, 다음과 같이 app_localizations.arb 파일을 작성할 수 있습니다.

{
  "hello": "안녕하세요",
  "@hello": {
    "description": "The word 'hello' in Korean"
  }
}

다국어 지원을 위한 리소스 파일은 각 언어 코드별로 작성해야 합니다. 예를 들어, 위의 예시에서는 한국어에 대한 리소스가 작성되어 있습니다.

4. 앱에서 다국어 지원 설정

다국어 지원을 위해 lib/main.dart 파일을 열고, MaterialApp 위젯에 localizationsDelegates와 supportedLocales를 추가해야 합니다.

import 'package:flutter/material.dart';
import './l10n/app_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '다국어 지원 앱',
      localizationsDelegates: [
        AppLocalizations.delegate, // Riverpod를 이용한 로컬라이제이션 추가
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        // 다른 로컬라이제이션 델리게이트도 추가할 수 있습니다.
      ],
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).hello),
      ),
      body: Center(
        child: Text(
          AppLocalizations.of(context).hello,
          style: TextStyle(fontSize: 20.0),
        ),
      ),
    );
  }
}

위의 코드에서 localizationsDelegates에 AppLocalizations.delegate를 추가하여 Riverpod를 이용한 로컬라이제이션을 구현하고, supportedLocales에 AppLocalizations.supportedLocales를 추가하여 지원하는 언어 코드를 설정합니다.

5. 다국어 언어 변경

이제 앱에서 사용할 언어를 변경할 수 있습니다. 디바이스의 언어 설정에 따라 자동으로 앱의 언어가 변경되지만, 필요한 경우 수동으로 언어를 변경할 수도 있습니다.

void changeLanguage(BuildContext context, Locale newLocale) {
  context.read(localeProvider).state = newLocale;
}

다음과 같이 changeLanguage 함수를 정의하면, 앱에서 언어를 변경할 수 있습니다. 이 함수를 사용하여 앱 전체에서 필요한 언어 변경을 수행할 수 있습니다.

이렇게 Riverpod를 사용하여 앱의 다국어 지원을 구현할 수 있습니다. 지원하는 언어에 따라 앱의 문자열이 자동으로 변경되므로, 사용자들의 다양한 언어 요구에 대응할 수 있습니다.

더 자세한 내용은 Riverpod 공식 문서를 참조하시기 바랍니다.

참고:

© 2018 Colin. All rights reserved.