[flutter] cupertino_icons 패키지를 통해 생성된 아이콘 사용 예시

cupertino_icons 패키지는 Flutter에서 iOS 디자인에 사용되는 아이콘을 제공하는 패키지입니다. 이 패키지를 사용하면 iOS 스타일의 아이콘을 간편하게 사용할 수 있습니다.

패키지 설치

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 아래와 같이 dependencies 항목에 패키지 이름과 버전을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

설정을 마쳤으면 터미널을 열고 flutter packages get 명령을 실행하여 패키지를 다운로드 받습니다.

아이콘 사용

cupertino_icons 패키지를 통해 생성된 아이콘은 CupertinoIcons 클래스를 통해 사용할 수 있습니다. 아이콘은 Icon 위젯을 사용하여 화면에 표시할 수 있습니다. 다음은 cupertino_icons 패키지에서 제공하는 아이콘 중 몇 가지의 예시입니다.

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('Cupertino Icons Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(CupertinoIcons.home),
            SizedBox(height: 16),
            Icon(CupertinoIcons.search),
            SizedBox(height: 16),
            Icon(CupertinoIcons.music_note),
          ],
        ),
      ),
    );
  }
}

위의 예시에서는 CupertinoIcons 클래스의 home, search, music_note 아이콘을 사용하였습니다.

커스텀 아이콘

cupertino_icons 패키지를 통해 제공되는 아이콘 외에도, 자체적으로 커스텀 아이콘을 생성할 수도 있습니다. iconFontPackage 속성을 사용하여 커스텀 아이콘 폰트의 패키지명을 지정하고, codePoint 속성을 사용하여 아이콘의 유니코드 코드 포인트를 지정합니다. 예를 들어, 새로운 커스텀 아이콘을 사용하려면 아래와 같이 코드를 작성할 수 있습니다.

Icon(
  IconData(
    0xe900,
    fontFamily: 'CustomIcons',
    fontPackage: 'custom_icons',
  ),
),

위의 예시에서는 custom_icons 패키지에 포함된 ‘CustomIcons’ 폰트의 유니코드 코드 포인트 0xe900에 해당하는 아이콘을 사용합니다.


위의 예시를 참고하여 cupertino_icons 패키지를 통해 생성된 아이콘을 사용하는 방법을 알아보았습니다. iOS 스타일의 아이콘을 사용하여 Flutter 애플리케이션을 더욱 멋지게 디자인할 수 있습니다.

더 많은 아이콘의 종류와 사용 방법은 cupertino_icons 패키지 문서를 참고하세요.