[Flutter] Riverpod이나 상태관리로 Localization 즉시 바뀌게 만들기

개요

---

플러터에서 현지화(Localization)를 적용하기 위한 패키지는 다양하다.

가장 대표적으로 사용되는 패키지인 easy_localization과 플러터 기본 패키지인 flutter_localizations가 있다 (flutter_localization 아님)

그러던 중 실시간 반응형 앱을 개발하다가 localization을 적용했을 때 매번 앱을 재시작한다는 점이 나를 괴롭게 했다.

또한 외부 패키지를 도움받아서 localization을 적용하려니 앱이 무거워지는 느낌도 드는 게 좋지 않았다.

이참에 새롭게 개발을 하는 겸 나는 외부패키지의 도움 없이 직접 localization을 적용해 보자고 결심을 했고, 깔끔하게 나만의 방식으로 localization을 적용하게 되었다. 

 

구성

---

• Flutter 3.10.x
• Android Studio
• Riverpod (다른 상태관리 패키지로도 가능)
• Android (Web, IOS, PC 모두 가능

 

진행

---

프로젝트를 생성하고 가장 먼저 할 일은 riverpod 의존성을 추가하도록 한다.

 

flutter pub add riverpod

 

만약 다른 상태관리툴을 사용한다면 바꿔도 된다.

 

이제 프로젝트의 기본 구조에 대해 설명을 하도록 하겠다.

 

 

• app_localizations.dart: 사전 정의된 현지화 관련 상수 및 정적 변수를 가지고 있다.
• widget_ref_extension.dart: RiverPod에서 상태를 가져오기 위한 주요 클래스인 WidgetRef를 확장하여 Localization기능을 추가하여 사용하기 위함. 만약 Riverpod에 의한 ChangeNotification을 사용할 필요가 없거나 WidgetRef 자체를 사용하지 않는다면, current_language_state를 싱글톤 패턴으로 변경한 후 BuildContext의 extension로 만들어 사용해도 된다. (대신 위젯을 직접 새로고쳐야 해당 화면에서 언어가 변경됨)
• current_language_state.dart: 현재 언어에 대한 상태를 제공해준다.
• home_screen.dart: UI 구성

 

이제 코드를 차근차근 살펴보며 이해하도록 하겠다.

 

먼저 app_localization.dart부터 시작하겠다.

 

<app_localization.dart>

//외부에서 상태를 다루기 위한 언어코드
enum LanguageCode{
  ko,
  en
}

class AppLocalizations{

  //정적변수로 언어들을 가져와 state로 제공할 준비
  static final KoreanLocalization _koreanLocalization = KoreanLocalization();
  static final EnglishLocalization _englishLocalization = EnglishLocalization();

  static Localization get(LanguageCode code){
    if(code == LanguageCode.ko) {
      return _koreanLocalization;
    }else if(code== LanguageCode.en){
      return _englishLocalization;
    }else{
      return _koreanLocalization;
    }
  }
}

//각 언어별 공통으로 선언해야할 변수들을 Localization이라는 추상클래스에 선언
abstract class Localization{
  //추상클래스의 변수들은 선언만 가능하고 할당되면 안됨.
  String get start_page_hello;
  String get start_page_change_to_kor;
  String get start_page_change_to_eng;
}

//추상클래스의 구현
class KoreanLocalization implements Localization{
  
  //추상클래스의 변수 오버라이드(재할당)
  @override
  String get start_page_hello => '안녕하세요';

  @override
  String get start_page_change_lang => '언어변경';

  @override
  String get start_page_change_to_kor => '한국어로';

  @override
  String get start_page_change_to_eng => '영어로';
}

class EnglishLocalization implements Localization{
  
  @override
  String get start_page_hello => 'Hello';

  @override
  String get start_page_change_lang => 'Change Language';

  @override
  String get start_page_change_to_kor => 'to Korean';

  @override
  String get start_page_change_to_eng => 'to English';
}

 

해당 소스코드 파일에서는 Localization에서 사용할 언어코드들, 정적함수, 언어별 정적객체들을 제공하고 있다.

주로 AppLocalizations 클래스에서 언어에 대한 정적변수를 선언 및 제공을 해주는데 해당 클래스의 get메서드는 extension에서 호출해 알맞은 언어를 적용할 수 있게 도와주도록 한다.

 

 

<current_language_state.dart>

import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../constants/app_localizations.dart';

final currentLanguageProvider =
    StateNotifierProvider<CurrentLanguageNotifier, LanguageCode>((ref) {
  return CurrentLanguageNotifier();
});

class CurrentLanguageNotifier extends StateNotifier<LanguageCode> {
  CurrentLanguageNotifier() : super(LanguageCode.ko);

  LanguageCode get currentLanguage => state;

  void changeLanguage(LanguageCode targetLanguage) {
    state = targetLanguage;
  }
}

 

여기서는 현재 언어에 대한 상태를 제공해주고 있다.

앞서 얘기했듯, 굳이 Riverpod패턴을 사용하는 게 아니라 Bloc, Singleton 등 다양한 패턴으로 대체할 수 있다. 대신 UI 업데이트에 관한 부분은 각 패턴에 맞게 수정을 해야 한다. (싱글톤패턴을 사용할 경우 이미 열려있는 페이지들은 앱 UI를 직접 업데이트해줘야 한다)

위의 코드에서는 LanguageCode라는 enum형식의 변수를 currentLanguage로 선언했으며 changeLanguage가 호출되어 상속 변수인 state의 값이 변경될 경우 자동으로 NotifyListners()가 호출될 것이다.

 

 

<widget_ref_extension.dart>

import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../constants/app_localizations.dart';
import '../states/current_language_state.dart';

//RiverPod의 핵심 클래스인 WidgetRef 클래스를 확장
extension WidgetRefExtension on WidgetRef{
  Localization get localizations => AppLocalizations.get(watch(currentLanguageProvider));
}

 

상태, 정적변수들 등 모든 구성요소들을 갖추었다면 이제 사용을 하기 위한 준비를 해야 한다.

riverpod패턴으로 직접 UI 내에서 언어 변경에 대한 리스너들을 등록해 줘도 되지만, 모든 Widget에 리스너를 등록하는 건 쓸데없이 글자를 낭비하는 셈이다.

조금이라도 더 적은 코드로 같은 기능을 수행할 수 있다면 최대한 그렇게 하는 게 좋다.

그렇기에 나는 flutter 앱을 개발할 때 extension을 자주 활용하는 편이고, 이번에도 역시 WidgetRef 클래스 또한 Consumer Widget으로 선언된 모든 곳에서 사용을 하기 때문에 WidgetRef만을 위한 extension을 만들어 줬다.

 

여기까지가 Localization로직과 관련된 코드의 끝이다.

 

남은 건 UI 구성과 main.dart의 수정이다.

 

<home_screen.dart>

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_self_localization/constants/app_localizations.dart';
import 'package:flutter_self_localization/extensions/widget_ref_extension.dart';

import '../states/current_language_state.dart';

class HomeScreen extends ConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MyLocalization'),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(ref.localizations.start_page_hello),
            const SizedBox(height: 50,),
            ElevatedButton(
                onPressed: () => _onPressedToKorean(ref),
                child: Text(ref.localizations.start_page_change_to_kor)),
            const SizedBox(height: 10,),
            ElevatedButton(
                onPressed: () => _onPressedToEnglish(ref),
                child: Text(ref.localizations.start_page_change_to_eng)),
          ],
        ),
      ),
    );
  }

  void _onPressedToKorean(WidgetRef ref) {
    final currentLanguageNotifier = ref.read(currentLanguageProvider.notifier);
    currentLanguageNotifier.changeLanguage(LanguageCode.ko);
  }

  void _onPressedToEnglish(WidgetRef ref) {
    final currentLanguageNotifier = ref.read(currentLanguageProvider.notifier);
    currentLanguageNotifier.changeLanguage(LanguageCode.en);
  }
}

 

UI구성은 이렇게 했고 ConsumerWidget을 통해 언어가 변경될 때마다 자동으로 UI를 업데이트하도록 구성해 줬다.

 

 

<main.dart>

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_self_localization/ui/home_screen.dart';

void main() {
  runApp(
    //RiverPod의 프로바이더 사용을 위해 래핑
    const ProviderScope(child: MyApp())
  );
}

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      home: const HomeScreen(),
    );
  }
}

 

main.dart에서는 간단히 ProviderScope만 래핑 하도록 했다.

 

이 상태로 앱을 실행해 보자.

 

 

 

 

처음 적용된 언어가 한국어로 되어있어서 지금은 한글로 떠있는 상태다.

 

영어로 버튼을 클릭했을 때 UI가 즉시 업데이트 되는 모습을 볼 수 있다.

 

 

결론

---

 

만약 앱의 규모가 커지게 될 경우 app_localization 안에서 모든 것을 제공하기엔 코드의 양이 많아질게 뻔하다.

이 글의 예제는 최대한 이해를 돕기 위해 한 파일 안에 모든 것을 담았으며, 실제로 사용을 할 때는 역할별로 코드들을 잘 나누어야 된다.