[flutter] 플러터 intl을 사용해서 앱에서 지도 언어를 어떻게 처리할 수 있나요?
  1. intl 패키지 추가하기 앱에서 지역화 언어를 처리하기 위해 intl 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 intl 패키지를 추가해주세요.

    dependencies:
      flutter:
        sdk: flutter
      intl: ^0.17.0
    
  2. 지역화 언어 파일 준비하기 앱의 기본 언어 및 지원할 다른 언어에 대한 지역화 언어 파일을 준비해야 합니다. 예를 들어, 영어와 한국어를 지원하려는 경우, ‘en.arb’와 ‘ko.arb’ 파일을 만들어야 합니다.

    다음은 ‘en.arb’ 파일의 예시입니다.

    {
      "title": "Hello, World!",
      "description": "Welcome to my app."
    }
    

    ‘ko.arb’ 파일의 경우, “title”과 “description” 값을 한국어로 번역해서 작성해야 합니다.

  3. 언어 변경 로직 구현하기 앱에서 사용할 언어를 변경하는 기능을 구현해야 합니다. 다음은 언어 변경 로직을 구현하는 예시입니다.

    import 'package:flutter/material.dart';
    import 'package:intl/intl.dart';
    import 'package:intl/intl_standalone.dart';
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      Locale _locale = const Locale('en'); // 기본 언어 설정
    
      @override
      void initState() {
        super.initState();
        Intl.defaultLocale = _locale.toLanguageTag(); // Intl 패키지의 기본 로케일 설정
      }
    
      void _changeLanguage(Locale locale) {
        setState(() {
          _locale = locale;
          Intl.defaultLocale = _locale.toLanguageTag(); // 선택한 언어로 Intl 패키지의 기본 로케일 변경
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Language Demo',
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate, // flutter_localizations 패키지의 기본 로컬라이제이션 델리게이트
            GlobalWidgetsLocalizations.delegate, // flutter_localizations 패키지의 기본 로컬라이제이션 델리게이트
          ],
          supportedLocales: [
            const Locale('en'),
            const Locale('ko'),
          ],
          locale: _locale, // 현재 선택된 언어 설정
          home: Scaffold(
            appBar: AppBar(
              title: Text(AppLocalizations.of(context).title), // 지역화된 언어 문자열 사용
            ),
            body: Center(
              child: Text(AppLocalizations.of(context).description), // 지역화된 언어 문자열 사용
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                _changeLanguage(const Locale('ko')); // 한국어로 언어 변경
              },
              child: Icon(Icons.language),
            ),
          ),
        );
      }
    }
    
    

    위 예시 코드에서는 _locale 변수를 이용하여 선택된 언어를 저장하고, Intl.defaultLocale을 통해 Intl 패키지의 기본 로컬 값을 설정합니다. _changeLanguage() 함수를 통해 언어를 변경하고, 변경된 언어에 맞게 앱의 언어가 업데이트 됩니다.

  4. 지역화된 언어 문자열 사용하기 화면에 표시되는 문구를 지역화된 언어 문자열로 표시하기 위해서는 AppLocalizations 클래스를 사용해야 합니다. 다음은 AppLocalizations 클래스의 구현 예시입니다.

    import 'package:flutter/material.dart';
    
    class AppLocalizations {
      static AppLocalizations of(BuildContext context) {
        return Localizations.of<AppLocalizations>(context, AppLocalizations);
      }
    
      String get title {
        return Intl.message(
          'Hello, World!',
          name: 'title',
          desc: 'Title',
        );
      }
    
      String get description {
        return Intl.message(
          'Welcome to my app.',
          name: 'description',
          desc: 'Description',
        );
      }
    }
    

    이제 앱의 어느 곳에서든 AppLocalizations.of(context).title 혹은 AppLocalizations.of(context).description을 사용하여 지역화된 언어 문자열을 표시할 수 있습니다.

  5. 언어 변경 버튼 추가하기 이제 화면에 언어 변경을 위한 버튼을 추가하면 됩니다. 예시 코드에서는 FloatingActionButton을 이용하여 버튼을 추가했습니다.

    위 예시 코드에서는 한국어로 언어를 변경하기 위해 _changeLanguage(const Locale('ko'))를 호출했습니다. 필요에 따라 다른 언어로 변경하는 로직을 추가할 수 있습니다.

지역화 언어를 처리하는 방법을 소개했습니다. 이제 플러터 Intl을 사용하여 앱에서 다국어 지원을 할 수 있습니다.