[flutter] 플러터 앱에서 지역화된 코스 표시 방법

12 Dec 2023

flutter

플러터는 멀티언어 및 지역화를 지원하여 앱을 다국어로 제공할 수 있습니다. 이 기능을 활용하여 지역화된 코스를 표시하는 방법을 알아봅시다.

1. 지역화 파일 설정

먼저, 앱에서 지원할 다국어에 맞는 지역화 파일을 설정해야 합니다. 이를 위해 pubspec.yaml 파일에 flutter_localizations 패키지를 추가하고, MaterialApp 위젯에서 지역화를 설정합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    // 추가적인 지역화 델리게이트들을 여기에 추가
  ],
  supportedLocales: [
    const Locale('en', 'US'), // 영어 (미국)
    const Locale('ko', 'KR'), // 한국어 (대한민국)
  ],
  // 나머지 앱 설정
)

2. 지역화된 코스 데이터 작성

다국어에 맞도록 지역화된 코스 데이터를 작성합니다. 이를 위해 lib/l10n 디렉토리에 각 언어별로 .arb 파일을 작성합니다.

예시 - ko-KR.arb (한국어 지역화)

{
  "courseTitle": "서울 시내 투어",
  "courseDescription": "서울의 명소를 돌아다니며 다양한 문화를 경험하세요."
}

3. 화면에 지역화된 코스 표시

마지막으로, 앱의 화면에 지역화된 코스를 표시합니다. 이를 위해 intl 패키지를 이용하여 지역화된 코스 데이터를 불러온 후 화면에 표시합니다.

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

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

이제 앱을 실행하면 사용자의 언어 설정에 따라 지역화된 코스가 표시될 것입니다.

위의 단계를 따라하면 플러터 앱에서 간단하게 지역화된 코스를 표시할 수 있습니다.

참고 문헌:

Flutter 지역화 가이드

다음 글에서도 더 많은 정보를 얻을 수 있습니다.