[flutter] cupertino_icons를 사용하여 아이콘에 다국어 지원 기능 추가하기

소개

Flutter는 iOS와 Android를 모두 지원하는 크로스 플랫폼 프레임워크로, 다국어 지원을 위해 다양한 방법을 제공합니다. 이 글에서는 Flutter에서 아이콘에 다국어를 지원하기 위해 cupertino_icons 패키지를 사용하는 방법을 알아보겠습니다.

cupertino_icons 패키지 설치하기

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

dependencies:
  cupertino_icons: ^1.0.2

패키지를 추가한 후에는 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치합니다.

아이콘 추가하기

cupertino_icons 패키지는 iOS의 네이티브 아이콘을 Flutter에서 사용할 수 있도록 제공합니다. 아이콘은 CupertinoIcons 클래스에서 사용할 수 있는 여러 상수로 정의되어 있습니다.

예를 들어, 다국어로 "알림"을 표시하는 아이콘을 추가하려면 다음과 같이 코드를 작성할 수 있습니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("다국어 아이콘 예제"),
      ),
      body: Center(
        child: Icon(
          CupertinoIcons.bell,
          size: 48.0,
        ),
      ),
    );
  }
} 

위의 코드에서는 CupertinoIcons.bell을 통해 벨 아이콘을 사용하고 있습니다.

다국어 지원 추가하기

앱의 언어 설정에 따라서 아이콘이 다른 언어로 표시되도록 하려면, intl 패키지를 사용하여 다국어 지원 기능을 추가해야 합니다. intl 패키지에 대한 자세한 내용은 여기를 참고하십시오.

패키지를 설치하고 이용할 준비가 완료되면, 언어 설정에 따라 아이콘을 변경하는 코드를 작성할 수 있습니다.

다음은 예제 코드입니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
 
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', 'US'),
        Locale('ko', 'KR'),
      ],
      localeResolutionCallback: (Locale locale, Iterable<Locale> supportedLocales) {
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale.languageCode &&
              supportedLocale.countryCode == locale.countryCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      title: '다국어 아이콘 예제',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("다국어 아이콘 예제"),
        ),
        body: Center(
          child: Icon(
            _getAppropriateIcon(),
            size: 48.0,
          ),
        ),
      ),
    );
  }

  IconData _getAppropriateIcon() {
    var locale = Intl.getCurrentLocale();
    if (locale.contains('ko')) {
      return CupertinoIcons.bell;  // '알림' 아이콘
    } else {
      return CupertinoIcons.alarm;  // 'Alarm' 아이콘
    }
  }
}

위의 코드에서는 _getAppropriateIcon() 메소드를 통해 현재 로케일에 맞는 아이콘을 반환하도록 하였습니다. 로케일이 한국어(ko)인 경우에는 CupertinoIcons.bell, 그 외의 경우에는 CupertinoIcons.alarm을 반환합니다.

결론

cupertino_icons 패키지를 사용하여 Flutter 앱에서 아이콘에 다국어 지원 기능을 추가할 수 있습니다. 이를 통해 사용자가 언어 설정에 따라 다른 아이콘을 볼 수 있게 됩니다. 다국어 지원은 사용자 경험을 향상시키고 글로벌 시장에서 앱의 성공을 증진시킬 수 있는 중요한 기능이므로, 앱 개발 과정에서 고려해야 할 사항입니다.

참고 자료