[flutter] flutter_localizations 패키지를 사용한 앱의 다국어 지원 여행 사진 업로드 방법

12 Dec 2023

flutter

어플리케이션을 다국어로 지원하는 것은 사용자들에게 더 많은 가치를 제공하고 국제 시장에서 성공을 이끌어내는 데 중요한 요소입니다. Flutter 앱을 개발하면서, flutter_localizations 패키지를 활용하여 다양한 언어로 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 flutter_localizations 패키지를 사용하여 여행 앱에 다국어 지원을 추가하는 방법에 대해 다루어보겠습니다.

1. flutter_localizations 패키지 설치

먼저, pubspec.yaml 파일에 아래와 같이 flutter_localizations 패키지를 추가합니다.

dependencies:
  flutter_localizations:
    sdk: flutter

패키지를 추가한 후에는 터미널에서 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

2. 지원할 언어 추가

MaterialApp 위젯을 사용하여 앱을 시작하는 부분에서 언어를 지정합니다. 이를 통해 flutter_localizations 패키지가 해당 언어의 지역 설정을 적용할 수 있습니다.

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // 영어
    const Locale('ko', ''), // 한국어
    // 지원할 다른 언어 추가
  ],
  // ... 기타 설정
)

3. 다국어 지원을 위한 리소스 파일 생성

lib 폴더에 l10n 폴더를 만들고, 그 안에 각 언어별로 리소스 파일을 추가합니다. 예를 들어, app_localizations_en.dart와 app_localizations_ko.dart와 같은 파일을 만들어 각 언어에 맞는 문자열을 정의합니다.

// app_localizations_en.dart
Map<String, String> get englishTranslation => {
  'title': 'Travel App',
  'upload_photo': 'Upload a Photo',
  // 다른 문자열 추가
};

// app_localizations_ko.dart
Map<String, String> get koreanTranslation => {
  'title': '여행 앱',
  'upload_photo': '사진 업로드',
  // 다른 문자열 추가
};

4. 다국어 문자열 사용

이제 앱 내에서 지원할 언어에 따라 해당 리소스 파일을 사용하여 문자열을 가져올 수 있습니다.

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).title),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).upload_photo),
      ),
    );
  }
}

위와 같은 방법으로 flutter_localizations 패키지를 사용하여 앱의 다국어 지원을 구현할 수 있습니다. 사용자들은 이제 앱을 자신이 선호하는 언어로 이용할 수 있게 되어, 사용자 경험이 향상됩니다.

이렇게 함으로써 여행 앱의 글로벌 사용자들을 대상으로 한 앱을 개발할 때, flutter_localizations 패키지를 사용하여 간단하고 효과적으로 다국어 지원을 구현할 수 있게 되었습니다.

참고문헌: Flutter 공식 문서