[flutter] 플러터 앱에서 다국어 지원을 위한 여행 일정 저장 방법

12 Dec 2023

flutter

다국어 지원은 모바일 앱을 개발할 때 중요한 요소 중 하나입니다. 여행 앱을 개발하는 경우, 사용자가 여행 일정을 저장할 때 여러 언어를 지원하는 것이 중요합니다. 플러터(Flutter)를 이용해 다국어 지원을 위한 여행 일정 저장 방법에 대해 알아보겠습니다.

다국어 지원을 위한 준비

플러터에서 다국어 지원을 위해 프로젝트를 설정해야 합니다. 먼저, pubspec.yaml 파일에 flutter_localizations 패키지를 추가합니다.

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

그리고 main.dart 파일에 아래와 같이 MaterialApp 위젯을 구성합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        AppLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ko', ''),
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale.languageCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      home: MyTravelApp(),
    );
  }
}

다국어 지원을 위한 언어 파일 생성

이어서, 각 언어별로 문자열을 저장할 언어 파일을 생성합니다. 예를 들어, 영어와 한국어를 지원하는 경우 app_localizations.dart 파일을 생성하고 아래와 같이 구성합니다.

import 'package:flutter/material.dart';

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

  String getTitle(BuildContext context) {
    return Localizations.of<Locale>(context, Locale).languageCode == 'en' ? 'My Travel App' : '나의 여행 앱';
  }

  // Add more localized strings here.
}

다국어 지원을 적용한 여행 일정 저장 화면

마지막으로, 다국어로 지원되는 여행 일정 저장 화면을 구성합니다.

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

class MyTravelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).getTitle(context)),
      ),
      body: Center(
        child: Text(
          AppLocalizations.of(context).getSaveButtonLabel(context),
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

위와 같이 작성하면, 사용자의 언어 설정에 따라 앱 내에서 자동으로 적절한 언어로 텍스트가 표시됩니다.

이렇게 구성된 플러터 앱은 사용자가 언어를 변경해도 일정 저장 화면 등의 문자열이 사용자가 설정한 언어로 자동으로 변경됩니다.

위의 방법을 통해, 플러터 앱에서 다국어 지원을 위한 여행 일정 저장 기능을 구현할 수 있습니다.

참고 문헌: Flutter 다국어 지원