[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 언어로 애플리케이션 언어를 변경하는 다국어 지원 애플리케이션을 만들어보자.

07 Dec 2023

flutter

다국어 지원은 모바일 애플리케이션에 필수적인 기능 중 하나입니다. 사용자가 원하는 언어로 애플리케이션을 변경할 수 있도록 하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. 이번 글에서는 플러터(Flutter)의 Stepper 위젯을 사용하여 사용자가 선택한 언어로 애플리케이션 언어를 변경하는 다국어 지원 애플리케이션을 만들어보겠습니다.

Stepper란?

Stepper는 플러터에서 제공하는 위젯 중 하나로, 단계적인 작업을 수행할 수 있도록 도와줍니다. 사용자는 증가 또는 감소 버튼을 통해 단계를 변경하고, 해당 단계에 맞는 콘텐츠를 확인하고 조작할 수 있습니다. 우리는 이 Stepper를 이용하여 언어 선택 단계를 구현할 것입니다.

다국어 지원 애플리케이션 개발하기

단계 1: 프로젝트 설정

우선 플러터 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하여 새로운 플러터 프로젝트를 생성합니다.

flutter create language_app

프로젝트 디렉토리로 이동한 후, pubspec.yaml 파일을 열어 다국어 지원을 위한 필수 패키지를 추가합니다. 이 예제에서는 flutter_localizations 패키지를 사용하겠습니다.

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

변경 사항을 적용하기 위해 다음 명령어를 실행합니다.

flutter pub get

단계 2: 언어 선택 화면 구성

lib 폴더 아래에 screens 폴더를 생성한 후, language_selection_screen.dart 파일을 생성합니다.

import 'package:flutter/material.dart';

class LanguageSelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Language Selection'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Select Language',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            RaisedButton(
              child: Text('English'),
              onPressed: () {},
            ),
            RaisedButton(
              child: Text('한국어'),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

이 코드는 단순한 언어 선택 화면을 구성합니다. 애플리케이션에 사용할 언어를 선택할 수 있는 버튼 두 개를 제공합니다.

단계 3: 애플리케이션 언어 변경하기

이제 버튼이 클릭될 때, 어떻게 애플리케이션 언어를 변경할 수 있는지 알아보겠습니다. LanguageSelectionScreen 클래스에서 onPressed 이벤트 핸들러를 수정하겠습니다.

RaisedButton(
  child: Text('English'),
  onPressed: () {
    changeLanguage('en');
    Navigator.pushNamed(context, '/home');
  },
),
RaisedButton(
  child: Text('한국어'),
  onPressed: () {
    changeLanguage('ko');
    Navigator.pushNamed(context, '/home');
  },
),

각 언어 버튼의 onPressed 이벤트 핸들러에서 changeLanguage 함수를 호출합니다. 이 함수는 사용자가 선택한 언어로 애플리케이션 언어를 변경합니다. Navigator.pushNamed 함수는 선택된 언어로 변경된 새로운 화면으로 이동합니다.

단계 4: 다른 화면에서 언어 적용하기

lib 폴더 아래에 screens 폴더를 생성한 후, home_screen.dart 파일을 생성합니다.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text(
          'Welcome to the home screen!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

이 화면은 단순한 홈 화면을 보여줍니다.

단계 5: 언어 지원 추가

lib 폴더 아래에 l10n 폴더를 생성한 후, app_localizations.dart 파일을 생성합니다.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

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

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Language App',
      'selectLanguage': 'Select Language',
      'english': 'English',
      'korean': '한국어',
    },
    'ko': {
      'title': '언어 애플리케이션',
      'selectLanguage': '언어 선택',
      'english': '영어',
      'korean': '한국어',
    },
  };

  String get title {
    return _localizedValues[locale.languageCode]['title'];
  }

  String get selectLanguage {
    return _localizedValues[locale.languageCode]['selectLanguage'];
  }

  String get english {
    return _localizedValues[locale.languageCode]['english'];
  }

  String get korean {
    return _localizedValues[locale.languageCode]['korean'];
  }
}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'ko'].contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
  }

  @override
  bool shouldReload(AppLocalizationsDelegate old) {
    return false;
  }
}

이 파일은 지원하는 언어 목록과 해당 언어에 대한 텍스트를 관리하는 AppLocalizations 클래스를 제공합니다. 텍스트에는 화면의 제목, 언어 선택 문구 및 버튼 텍스트가 포함됩니다.

단계 6: 언어 지원 적용하기

이제 애플리케이션의 언어 지원을 적용해보겠습니다.

lib 폴더의 main.dart 파일을 열고, 다음 코드를 추가합니다.

import 'package:flutter/material.dart';
import 'package:language_app/screens/home_screen.dart';
import 'package:language_app/screens/language_selection_screen.dart';
import 'package:language_app/l10n/app_localizations.dart';

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

class LanguageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Language App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        const AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ko', ''),
      ],
      initialRoute: '/',
      routes: {
        '/': (context) => LanguageSelectionScreen(),
        '/home': (context) => HomeScreen(),
      },
    );
  }
}

위 코드는 애플리케이션의 기본 설정을 정의합니다. MaterialApp에서 localizationsDelegates 속성을 사용하여 AppLocalizationsDelegate를 등록합니다. 이를 통해 언어 지원을 제공할 수 있습니다. 또한 supportedLocales 속성으로 지원하는 언어를 등록합니다.

이제 애플리케이션의 언어가 변경되면 해당 언어로 애플리케이션 내의 텍스트가 변경될 것입니다. Stepper 위젯을 사용하여 간단하게 다국어 지원 애플리케이션을 만드는 방법을 알아보았습니다.

이 글은 참고를 위한 글일 뿐, 실제 애플리케이션 개발에서는 추가적인 로컬라이제이션 처리와 언어 파일 관리 방법 등에 대해 고려해야 할 사항이 많이 있을 수 있습니다. 추가로 테스트와 버그 수정을 위해 애플리케이션을 더 발전시킬 수도 있습니다.