[flutter] 플러터 앱에서 변수에 따라 동적으로 언어 변경하는 방법

12 Dec 2023

flutter

플러터(Flutter)로 다중 언어를 지원하는 앱을 개발할 때, 사용자가 원하는 언어를 선택할 수 있도록 만들어야 할 때가 있습니다. 이 포스트에서는 플러터 앱에서 사용자가 선택한 변수에 따라 동적으로 언어를 변경하는 방법에 대해 알아보겠습니다.

1. 다중 언어 지원 구성

플러터 앱에서 다중 언어를 지원하려면, flutter_localizations 패키지를 사용하여 MaterialApp 위젯을 구성해야 합니다. 이 패키지를 사용하면 앱 내에서 문구를 다양한 언어로 제공할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'), // 영어
        const Locale('ko', 'KO'), // 한국어
      ],
      home: MyHomePage(),
    );
  }
}

2. 동적으로 언어 변경하기

다중 언어를 지원하는 앱에서 동적으로 언어를 변경하려면, 사용자가 선택한 언어에 따라 해당 언어의 Locale을 설정해야 합니다. 이를 위해 사용자가 선택한 언어를 저장하는 변수를 만들어 관리할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_localizations/localization/app_localizations.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _locale;

  void _changeLanguage(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        AppLocalizations.delegate, // 앱에서 사용하는 커스텀 로컬라이제이션
      ],
      supportedLocales: [
        const Locale('en', 'US'), // 영어
        const Locale('ko', 'KO'), // 한국어
      ],
      locale: _locale, // 사용자가 선택한 언어로 설정
      home: MyHomePage(onLanguageChanged: _changeLanguage),
    );
  }
}

위 예제에서 _changeLanguage 메서드는 사용자가 언어를 변경할 때 호출되는 메서드입니다. 이를 통해 사용자가 선택한 언어에 따라 _locale을 변경할 수 있습니다.

3. 커스텀 Localizations 클래스 생성

마지막으로, 앱에서 사용할 커스텀 로컬라이제이션을 정의하는 클래스를 생성해야 합니다. 이를 통해 다양한 언어에 대한 텍스트를 정의하고, 해당 언어로 출력할 수 있습니다.

import 'package:flutter/material.dart';

class AppLocalizations {
  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  String get title {
    // 각 언어에 따른 제목 반환
    return 'Title';
  }

  String get greeting {
    // 각 언어에 따른 인사말 반환
    return 'Hello!';
  }
  
  // 추가적인 언어별 텍스트 정의
}

AppLocalizations 클래스를 통해 다양한 언어에 따른 텍스트를 정의하고, 이를 앱 내에서 사용하여 다중 언어 지원을 구현할 수 있습니다.

이렇게 하면 사용자가 선택한 언어에 따라 앱 내의 텍스트가 동적으로 변경되는 플러터 앱을 만들 수 있습니다.

참고문헌:

공식 플러터 다국어 지원 문서