[Flutter] 기본 다국어(localization) 설정

앱을 개발할 때, 거의 대부분 모국어와 영어를 둘 다 사용할 수 있게 localization을 적용한다. 그래서 이런 다국어 시스템을 개발해야하는데 pub.dev에 다양한 언어 지원 패키지들이 있지만 기본 다국어 설정이 나에게 더 쉽게 느껴졌다. 이런 기본 다국어 설정을 한 부분을 작성해보고자 한다.

pubspecs.yaml 파일에 intl 최신 패키지를 추가하고

아래 main.dart 파일과 local.dart파일 을 아래와 같이 적고

언어 json 파일 생성만 local 파일에 명시한 대로 생성해주면
폰 언어 설정에 맞게 변경되는 다국어 시스템을 적용할 수 있다.

main.dart 파일

Future<void> main() async {


  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {



  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
    
      localizationsDelegates: const [
        Local.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', 'US'),
        Locale('ko', 'KR'),
        // Locale('ja', 'JP'), // 일본어 추가하고 싶으면 이런식으로 추가하고 local 파일에 isSupprottedd에 추가
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale!.languageCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      home: HomePage(),
    );
  }
}

local.dart 파일

import 'dart:async';
import 'dart:convert';

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

class Local {
  final Locale locale;

  Local(this.locale);

  static Local? of(BuildContext context) {
    return Localizations.of<Local>(context, Local);
  }

  static const LocalizationsDelegate<Local> delegate =
      _AppLocalizationsDelegate();

  late Map<String, String> _localizedStrings;

  Future<bool> load() async {
    String jsonString =
        await rootBundle.loadString('assets/lang/${locale.languageCode}.json');
    Map<String, dynamic> jsonMap = json.decode(jsonString);

    _localizedStrings = jsonMap.map((key, value) {
      return MapEntry(key, value.toString());
    });

    return true;
  }

  String? trans(String key) {
    return _localizedStrings[key];
  }
}

class _AppLocalizationsDelegate
    extends LocalizationsDelegate<Local> {
  const _AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'ko'].contains(locale.languageCode);
  }

  @override
  Future<Local> load(Locale locale) async {
    Local localizations = Local(locale);
    await localizations.load();
    return localizations;
  }

  @override
  bool shouldReload(covariant LocalizationsDelegate<Local> old) =>
      true;
}

언어 json 파일 추가

(추가) string 익스텐션 추가

string_extention.dart 파일을 생성해서 string 익스텐션에 아래와 같이 추가하면 “(키값).ts” 으로 쉽게 string을 다국어화 시킬 수 있다.

import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';

import '../local.dart';

extension StringExtension on String {
  String get ts {

    BuildContext? context = Get.context;
    return Local.of(context!)?.trans(this) ?? this;

  }
}

텍스트 다국어화 방법

아래와 같이 ko.json과 en.json 파일에 정의된 premium이라는 key 값이 있다. 여기에 .ts 만 붙여주면 폰설정 에 따라 영어와 한국어 등으로 맞춰서 표시 된다

Text(
  'premium'.ts,
  style: title18,
),

위와 같이 flutter의 기본 다국어 시스템에 알아보았다. 개발자마다 활용하는 방식이 다른데 본인의 방식에 맞춰서 적용하면 된다.