[flutter] 플러터 앱에서 지역화된 화면 및 위젯 전환 방법

12 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 여러 언어로 지역화된 화면 및 위젯을 관리하는 것은 중요합니다. 앱을 다국어로 제공하는 경우, 사용자는 자신의 언어로 앱을 사용할 수 있어 더욱 편리합니다. 이번 포스트에서는 플러터 앱에서 지역화된 화면 및 위젯을 어떻게 전환하는지에 대해 알아보겠습니다.

1. 지역화된 문자열 다루기

플러터에서는 intl 패키지를 사용하여 지역화된 문자열을 처리합니다. 이 패키지를 사용하면 간단하게 다국어 지원을 구현할 수 있습니다.

다음은 intl 패키지를 사용하여 지역화된 문자열을 처리하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(Intl.message('hello_world', name: 'helloMessage')),
        ),
        body: Center(
          child: Text(Intl.message('welcome', name: 'welcomeMessage')),
        ),
      ),
    );
  }
}

위 예제에서는 intl 패키지의 Intl.message 메서드를 사용하여 지역화된 문자열을 처리하고 있습니다.

2. 지역화된 화면 전환

다국어로 제공되는 앱에서는 사용자의 언어에 따라 지역화된 화면을 제공해야 합니다. 플러터에서는 MaterialApp 위젯의 localizationsDelegates 및 supportedLocales 속성을 설정하여 지역화된 화면 전환을 구현할 수 있습니다.

다음은 MaterialApp 위젯에서 localizationsDelegates 및 supportedLocales를 설정하여 지역화된 화면 전환을 구현하는 예제입니다.

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', 'US'), // 영어
    const Locale('ko', 'KR'), // 한국어
  ],
  home: MyHomePage(),
);

위 예제에서는 영어 및 한국어를 지원하는 앱을 구현하기 위해 supportedLocales를 설정하는 방법을 보여주고 있습니다.

3. 지역화된 위젯 전환

지역화된 위젯을 전환하기 위해서는 해당 언어에 맞는 위젯을 보여주어야 합니다. 이를 위해 Intl 패키지와 조건부 렌더링을 활용하여 지역화된 위젯 전환을 구현할 수 있습니다.

다음은 Intl 패키지와 조건부 렌더링을 활용하여 지역화된 위젯 전환을 구현하는 예제입니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              Intl.message('image_path', name: 'welcomeImage'), // 이미지 경로 지역화
            ),
            Text(
              Intl.message('welcome_message', name: 'welcomeMessage'), // 환영 메시지 지역화
            ),
          ],
        ),
      ),
    );
  }
}

위 예제에서는 Intl.message 메서드를 사용하여 지역화된 문자열을 처리하고 지역화된 이미지와 텍스트를 화면에 보여주고 있습니다.

플러터 앱에서는 intl 패키지를 활용하여 간단하게 지역화된 화면 및 위젯을 전환할 수 있습니다. 다국어 지원 기능을 통해 사용자들에게 더 다양한 경험을 제공할 수 있으며, 앱의 사용성을 향상시킬 수 있습니다.

flutter-intl 패키지 공식 문서 flutter 지역화 관련 문서