flutter에서는 MaterialApp 위젯에 ThemeData 위젯을 넘겨주어 내가 원하는 Theme 으로 정의된 앱을 만들 수 있습니다.

하지만, 프로젝트의 규모가 커지다 보면 ThemeData가 어느 위젯에 어느 부분에 적용되는지, 어느 부분에는 적용이 되지 않는지 너무나 모호해지고 Theme.of(context) 으로 적용한 부분들은 tracking 하기가 쉽지 않죠.

그래서, 제 경험을 토대로 한 방법 한가지를 이야기 해보려 합니다.

🎨 Flutter custom theme

Flutter custom theme 이라는 라이브러리를 사용했어요. flutter 의 themeData 와는 조금 다르게 내가 원하는 이름으로 theme 을 정의하고 원하는 곳에 직접 지정을 해줘야 해요.

Custom theme class 만들기

CustomThemeData를 extends 한 클래스를 만들고 내가 원하는 색과, 텍스트 스타일 같은 모든 themeData를 정의해 사용할 수 있어요.

Container color와 textStyle, align 을 CustomTheme 으로 적용

🤟 장점 1. 언어별 다른 텍스트 스타일 쓰기

그래서, 저거 말고 뭐가 좋은데? 라고 할 수 있는데. 개인적으로 느꼈던 장점 몇가지만 이야기 해볼게요. 첫 번째로 언어별로 모두 baseline 이 다릅니다. 그래서 이 텍스트들이 모두 같은 위치에 있을거라고 보장하기가 조금 힘들어요. 제 개인적인 경험에서는요. 그래서 저희 팀에서는 언어별로 다른 텍스트 스타일을 사용하기로 했고, 이런식으로 해결했어요. context로 languageCode를 가져와서 해당하는 스타일을 주는거죠. 덕분에 디자이너님이 만족할 만한 결과가 나왔었어요.

🤟 장점 2. no more brightness check

다크모드를 지원하려고 하면서 dark 컬러와 light 컬러를 따로 지정해놓고 사용하곤 했는데, 이 두 녀석들을 사용할때 bool isDark = Theme.of(context).birghtness == Brightness.dark; 이런 flag를 하나 두고 사용하곤 했어요. 덕분에 파편화가 심해졌고, 관리가 힘들어졌습니다. 코드 더 쳐야하는 단점도 있었죠. CustomTheme을 쓰고나서는 아래에서 살펴볼 수 있듯이 darkMode일때는 알아서 dark theme을 가져다 쓰기 때문에 불필요한 코드를 줄일 수 있었어요.

👨‍🎨 마치며

flutter theme 때문에 두통과 함께 겪었던 것들을 공유해 봤어요. 부족했던 점이나 의견이 있으시다면 댓글로 공유해주세요! 제 이야기가 여러분의 개발에 도움이 되었으면 좋겠어요 (:

갑작스런 청천벽력같은 소식에 서둘러서 다른 패키지들을 찾아봤는데 intl 패키지라던가.. flutter_i18n 라던가... 다양한 패키지들을 고려해보았지만 대부분 dart code를 arb로 generate 하고 변환한 arb 파일을 사용하는 형태였는데 본인이 속한 회사에서는 이미 모든 텍스트 리소스가 key:value 형태로 있었기 때문에 이 형태를 벗어나지 않고 진행하고 싶었다.

그래서 결정한 패키지가 easy_localization 이다.

한차례 테스트 후에 잘 동작하는 것 같아서 사용하기로 결정했다.

패키지 설치 및 셋업

여느 Dart 패키지처럼 pubsepc.yaml에 추가

easy_localization: ^2.3.2

그리고 assets에 사용할 asset 파일을 명시해줘야 한다

flutter:
  assets:
    - assets/translations/

⚠️ iOS 에서는 반드시 info.plist 를 수정해야함

xcode에서 Runner.xcworkspace를 열고 info.plist의 Localizations 프로퍼티를 수정해야 한다.

만약 Localizations 프로퍼티가 없으면 +를 눌러서 Localizations 프로퍼티를 추가해주면 된다

Localizations 에 지원할 언어의 item을 추가해주면 된다

사용하기

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

void main() {
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('de', 'DE')],
      path: 'assets/translations', // <-- change patch to your
      fallbackLocale: Locale('en', 'US'),
      child: MyApp()
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

• main에서 위 예제처럼 MyApp을 wrapping 하고 지원되는 언어들을 supportedLocales 에 명시한다
• path는 localization resource 파일들의 위치
• 기기의 locale이 지원하지 않는 언어면 사용할 언어는 fallbackLocale 에 지정해주면 된다.

Locale 이 항상 en_US로 잡히는 문제

context.locale 로 MaterialApp의 locale을 지정해주니까 항상 en_US로 locale이 잡히는 문제가 있었다.

나는 아래와 같이 dart:ui를 이용해서 시스템 locale 값을 통해 context.locale을 잡아주도록 해서 해결했다.

void setLocale(BuildContext context) {
    switch (ui.window.locale.languageCode) {
      case 'ko':
        context.locale = Locale('ko', 'KR');
        break;
      case 'es':
        context.locale = Locale('es', 'ES');
        break;
      case 'fr':
        context.locale = Locale('fr', 'FR');
        break;
      case 'it':
        context.locale = Locale('it', 'IT');
        break;
      case 'ja':
        context.locale = Locale('ja', 'JP');
        break;
      case 'nl':
        context.locale = Locale('nl', 'NL');
        break;
      case 'zh':
        if (ui.window.locale.scriptCode == 'Hant') {
          context.locale = Locale('zh', 'TW');
        }
        if (ui.window.locale.countryCode == 'HK' ||
            ui.window.locale.countryCode == 'TW' ||
            ui.window.locale.countryCode == 'CN') {
          context.locale = Locale('zh', ui.window.locale.countryCode);
        } else
          context.locale = Locale('zh', 'CN');
        break;
      default:
        break;
    }
  }

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    setLocale(context);
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

사용

이제 키값을 통해서 아래처럼 간결하게 다국어 지원이 가능하다

Text('CommonProfile'.tr())