[flutter] 플러터 앱의 언어 설정 기능 구현 방법

12 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 다국어 지원 및 언어 설정 기능은 중요한 부분입니다. 사용자는 자신의 선호하는 언어로 앱을 사용하고 싶어합니다. 이번 포스트에서는 플러터 앱에 언어 설정 기능을 구현하는 방법에 대해 알아보겠습니다.

다국어 지원 준비

우선, 언어 설정 기능을 구현하기 위해 앱에서 지원할 다국어를 준비해야 합니다. res 폴더 내에 각 언어별로 문자열 및 리소스를 정의하는 strings.xml 파일을 생성합니다. 예를 들어, 한국어로 지원할 경우 strings-ko.xml, 영어로 지원할 경우 strings-en.xml과 같이 생성합니다.

언어 설정 기능 구현

다음으로, 플러터 앱에서 언어 설정 기능을 구현해야 합니다. 사용자가 원하는 언어로 앱을 설정할 수 있는 기능을 제공합니다.

다국어 지원을 위해 flutter_localizations 패키지를 사용하여 앱에서 지원할 언어를 설정하고, shared_preferences 패키지를 사용하여 사용자가 선택한 언어를 저장하고 관리합니다.

MaterialApp 위젯의 localizationsDelegates와 supportedLocales 속성을 설정하여 다국어를 지원하고, 사용자가 선택한 언어에 따라 앱의 언어를 변경하는 기능을 구현합니다.

아래는 간단한 예시 코드입니다.

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

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

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

class _MyAppState extends State<MyApp> {
  // 기본 언어는 한국어로 설정
  Locale _locale = const Locale('ko', 'KO');

  // 사용자가 선택한 언어를 불러오는 함수
  _loadLocale() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String languageCode = prefs.getString('language_code') ?? 'ko';
    setState(() {
      _locale = Locale(languageCode);
    });
  }

  @override
  void initState() {
    super.initState();
    _loadLocale();
  }

  // 사용자가 언어를 변경했을 때 호출되는 함수
  _changeLanguage(Locale type) {
    setState(() {
      _locale = type;
    });

    SharedPreferences.getInstance().then((prefs) {
      prefs.setString('language_code', type.languageCode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 언어 설정 예제',
      theme: ThemeData(primarySwatch: Colors.blue),
      locale: _locale,
      supportedLocales: [
        const Locale('ko', 'KO'), // 한국어
        const Locale('en', 'US'), // 영어
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: MyHomePage(changeLanguage: _changeLanguage),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final Function(Locale) changeLanguage;

  MyHomePage({required this.changeLanguage});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('플러터 언어 설정 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '앱 언어를 설정하세요.',
            ),
            ElevatedButton(
              onPressed: () {
                changeLanguage(Locale('ko', 'KO')); // 한국어로 변경
              },
              child: Text('한국어'),
            ),
            ElevatedButton(
              onPressed: () {
                changeLanguage(Locale('en', 'US')); // 영어로 변경
              },
              child: Text('English'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 간단한 플러터 앱에서의 언어 설정 예제입니다.

언어 설정 기능을 구현하면 사용자가 앱을 더욱 편리하게 사용할 수 있게 도와줍니다. 다국어 지원과 언어 설정 기능을 통해 사용자의 만족도를 높일 수 있습니다.

이상으로 플러터 앱의 언어 설정 기능 구현 방법에 대해 알아보았습니다.

다국어 지원 준비

언어 설정 기능 구현

참고 자료