[flutter] FlatButton을 사용하여 다국어 지원 기능을 추가하는 방법은?

26 Dec 2023

flutter

다양한 언어를 지원하는 앱을 개발할 때 중요한 부분 중 하나는 다국어 지원 기능을 추가하는 것입니다. Flutter에서는 Intl 패키지를 사용하여 간단하게 다국어 지원 기능을 추가할 수 있습니다. 이 포스트에서는 FlatButton을 예로 들어, 다국어 지원 기능을 추가하는 방법을 알아보겠습니다.

1. Intl 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

2. 다국어 지원 기능 구현

아래는 FlatButton 위젯에 다국어 지원 기능을 추가한 예시입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('다국어 지원 예제'),
        ),
        body: Center(
          child: FlatButton(
            onPressed: () {
              // 다국어 지원 기능을 추가한 버튼 텍스트
              String buttonText = Intl.message('Press Me', name: 'buttonText');
              print(buttonText);
            },
            child: Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

3. 다국어 지원 설정

마지막으로, Intl 패키지를 사용하여 지원하고자 하는 각 언어에 대한 문자열을 설정합니다.

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

class MyLocalizations {
  static Future<MyLocalizations> load(Locale locale) {
    final String name = (locale.countryCode.isEmpty) ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return MyLocalizations();
    });
  }

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

  String get buttonText {
    return Intl.message(
      'Press Me',
      name: 'buttonText',
      desc: 'The text on the Press Me button',
    );
  }
}

위와 같이 MyLocalizations 클래스를 생성하여 사용하고자 하는 각 언어에 대한 buttonText를 설정해줍니다.

이렇게 설정된 MyLocalizations 클래스를 이용하여 각 언어에 대한 버튼 텍스트를 불러올 수 있습니다.

이제, Intl 패키지를 사용하여 FlatButton 위젯을 다국어 지원 기능으로 구현할 수 있게 되었습니다.

더 많은 정보를 찾으려면 Introducing the Flutter intl package를 확인해보세요.