[flutter] flutter_localizations를 사용한 앱의 다국어 지원 메모장 기능 구현 방법

12 Dec 2023

flutter

다국어 지원 메모장 앱을 만들기 위해 flutter_localizations 패키지를 사용할 수 있습니다. 이를 통해 앱을 여러 언어로 번역하고, 사용자가 원하는 언어로 앱을 설정할 수 있습니다.

flutter_localizations 패키지 추가

먼저, pubspec.yaml 파일에 flutter_localizations 패키지를 추가합니다.

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

패키지를 추가한 후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

지원할 다국어 추가

MaterialApp 위젯을 생성할 때 localizationsDelegates와 supportedLocales 속성을 설정해야 합니다.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
  
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // English
        const Locale('ko', ''), // Korean
      ],
      ...
    );
  }
  ...
}

위와 같이 supportedLocales에 지원할 언어를 추가하고, 각 언어에 맞는 번역을 localizationsDelegates에 등록합니다.

메모장 앱의 다국어 지원

이제 메모장 앱에서 각 언어에 맞는 번역을 할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // English
        const Locale('ko', ''), // Korean
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          // 지정된 언어에 따라 다른 문자열을 표시
          Localizations.of(context).locale.languageCode == 'ko'
              ? '메모장'
              : 'Memo App',
        ),
      ),
      body: Center(
        child: Text(
          // 지정된 언어에 따라 다른 문자열을 표시
          Localizations.of(context).locale.languageCode == 'ko'
              ? '안녕하세요, 메모장 앱입니다.'
              : 'Hello, This is a memo app.',
        ),
      ),
    );
  }
}

위의 코드에서는 Localizations.of(context).locale.languageCode를 이용하여 사용자가 선택한 언어에 따라 다른 문자열을 보여줍니다.

이와 같이 flutter_localizations 패키지를 사용하여 다국어 지원 메모장 앱을 만들 수 있습니다.

참고 자료:

Flutter Internationalization