[flutter] 플러터 Riverpod를 이용한 다국어 지원 구현 방법

30 Nov 2023

flutter

플러터는 크로스 플랫폼 앱 개발을 위한 인기있는 프레임워크입니다. 다국어 지원은 앱의 국제화와 사용자들에게 더 나은 경험을 제공하기 위해 중요한 요소입니다. 이번 포스트에서는 플러터 Riverpod를 사용하여 다국어 지원을 구현하는 방법을 알아보겠습니다.

1. 다국어 리소스 파일 준비하기

먼저, 앱의 다국어 지원을 위해 사용할 리소스 파일을 준비해야 합니다. 이 파일들은 각각의 지원되는 언어에 대해 해당 언어의 텍스트를 포함하고 있습니다. 예를 들어, en.json, ko.json, ja.json 등의 파일을 만들어 각각의 언어에 대한 텍스트를 포함시킬 수 있습니다.

각각의 JSON 파일은 다음과 같은 형식으로 구성됩니다:

{
  "title": "앱 제목",
  "description": "앱 설명"
}

2. Riverpod와 LocaleProvider 설정하기

이제 Riverpod와 LocaleProvider를 설정해야 합니다. Riverpod는 상태 관리를 위한 라이브러리로, LocaleProvider는 현재 선택된 언어 정보를 제공하는 Provider입니다.

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', 'US'),
        Locale('ko', 'KR'),
        Locale('ja', 'JP'),
      ],
      title: '다국어 지원 앱',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final locale = watch(localeProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('다국어 지원 앱'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '선택된 언어: ${locale.languageCode}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Text(
              context.read(localeTextProvider('title')),
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              context.read(localeTextProvider('description')),
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

final localeProvider = Provider<Locale>((ref) {
  // 기기의 현재 설정된 언어 가져오기
  // 만약 지원되는 언어가 아닐 경우 기본 언어로 설정
  final locale = Platform.localeName.split('_')[0];
  return supportedLocales
      .firstWhere((locale) => locale.languageCode == locale, orElse: () => Locale('en', 'US'));
});

final localeTextProvider = Provider.family<String, String>((ref, key) {
  final locale = ref.watch(localeProvider);
  final jsonString = await rootBundle.loadString('assets/${locale.languageCode}.json');
  final jsonMap = json.decode(jsonString) as Map<String, dynamic>;
  return jsonMap[key];
});

위 코드에서 localeProvider는 기기의 현재 설정된 언어를 가져오는 Provider입니다. localeTextProvider는 특정 키를 기반으로 언어 파일에서 텍스트를 가져오는 Provider입니다.

3. 다국어 텍스트 사용하기

위의 예시 코드에서 MyHomePage 위젯은 localeTextProvider를 사용하여 다국어 텍스트를 가져와 화면에 표시합니다. context.read(localeTextProvider('title'))와 같은 방식으로 특정 키에 대한 텍스트를 가져올 수 있습니다.

결론

플러터 Riverpod를 이용하여 다국어 지원을 구현하는 방법을 살펴보았습니다. Riverpod를 사용하면 앱의 상태 관리와 다국어 지원을 효율적으로 처리할 수 있습니다. 이를 통해 사용자들에게 다양한 언어로 앱을 제공하고 더 나은 사용자 경험을 제공할 수 있습니다.

참고 문서: