[flutter] 플러터 Drawer를 사용하여 다국어 지원 기능을 구현하는 방법은?

07 Dec 2023

flutter

다국어 지원 기능은 앱 개발에서 중요한 요소 중 하나입니다. 사용자가 언어를 선택할 수 있는 기능을 제공하면서 원하는 언어로 앱을 번역할 수 있습니다. 이번 튜토리얼에서는 플러터(Dart)에서 Drawer 위젯을 사용하여 다국어 지원 기능을 구현하는 방법을 살펴보겠습니다.

1. 프로젝트 설정

먼저, 다국어 지원에 필요한 라이브러리를 추가해야 합니다. flutter_localizations 패키지는 플러터 앱에서 다국어를 지원하기 위해 필요한 기능을 제공합니다. intl 패키지는 앱의 다국어 문자열을 형식화하기 위해 사용됩니다. pubspec.yaml 파일에 다음 라이브러리를 추가하겠습니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

라이브러리를 추가한 후에는 패키지들을 업데이트하기 위해 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치하세요.

2. 다국어 번역 파일 준비

앱에서 사용할 다국어 문자열을 정의하는 파일을 준비해야 합니다. 일반적으로 lib/l10n 디렉토리에 위치시킵니다. 해당 디렉토리에 app_localizations.dart와 app_localizations_*.dart라는 두 개의 파일을 생성하세요. *는 각 언어에 대한 언어 코드입니다. 예를 들어, 한국어는 ko이므로 app_localizations_ko.dart 파일을 생성합니다.

app_localizations.dart는 언어 별 문자열을 로드하기 위한 클래스를 정의하는 파일입니다. 다음과 같이 작성하세요.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name = 'app_localizations_${locale.languageCode}';
    final String localeName =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

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

  String get title {
    return Intl.message(
      'My App',
      name: 'title',
      desc: 'The title of the application.'
    );
  }

  // 다른 언어 문자열도 여기에 추가하세요.
}

app_localizations_*.dart 파일에는 각 언어에 대한 문자열을 정의하는 것이 포함됩니다. 다음은 예제입니다.

import 'package:intl/intl.dart';
import 'messages_all.dart';

class AppLocalizationsEn {
  static Future<AppLocalizationsEn> load(Locale locale) {
    final String name = 'app_localizations_${locale.languageCode}';
    final String localeName =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizationsEn();
    });
  }

  String get title {
    return Intl.message(
      'My App',
      name: 'title',
      desc: 'The title of the application.'
    );
  }

  // 다른 언어 문자열도 여기에 추가하세요.
}

AppLocalizationsEn localization = AppLocalizationsEn();

3. main.dart 파일 업데이트

이제 main.dart 파일에서 다국어 지원을 설정해야합니다. MaterialApp 위젯을 사용하여 앱을 감싸는 동안 localizationsDelegates와 supportedLocales 속성을 설정해야 합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('ko', ''),
        // 지원하는 다른 언어 추가
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String appBarTitle = AppLocalizations.of(context).title;

    return Scaffold(
      appBar: AppBar(
        title: Text(appBarTitle),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text('English'),
              onTap: () {
                // 언어 변경 로직 추가
              },
            ),
            ListTile(
              title: Text('한국어'),
              onTap: () {
                // 언어 변경 로직 추가
              },
            ),
          ],
        ),
      ),
      body: Container(
        child: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

위의 코드에서 supportedLocales에 원하는 나라 코드를 추가하여 지원할 언어를 설정할 수 있습니다. 앱의 언어가 변경되면 onTap 이벤트 핸들러 내에서 해당 언어로 앱을 업데이트하는 로직을 추가하세요.

이제 다국어 지원 기능을 사용하여 플러터 Drawer를 구현할 수 있습니다. 사용자가 선택한 언어에 따라 앱 문자열이 변경되도록 코드를 업데이트하면 됩니다.