[flutter] cupertino_icons를 이용한 아이콘 그룹화 및 클러스터링하기

cupertino_icons는 Flutter 앱 개발에서 아이콘을 사용하기 위한 아이콘 패키지입니다. 이 패키지를 사용하면 iOS 스타일의 아이콘을 간편하게 사용할 수 있습니다. 이번 글에서는 cupertino_icons를 이용하여 아이콘을 그룹화하고 클러스터링하는 방법을 살펴보겠습니다.

1. cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일에서 cupertino_icons 패키지를 추가합니다. 아래와 같이 dependencies 블록에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

변경된 내용을 적용하기 위해 다음 명령을 실행합니다.

$ flutter pub get

2. 아이콘 그룹화하기

cupertino_icons 패키지에는 다양한 아이콘이 제공되는데, 이를 그룹화하여 사용할 수 있습니다. 예를 들어, 화면 상단에 배치된 어떤 아이콘들을 특정 기능과 관련된 아이콘으로 그룹화한다고 가정해보겠습니다.

먼저, 사용할 아이콘을 CupertinoIcons 클래스의 정적 상수로 가져옵니다.

import 'package:flutter/cupertino.dart';
const IconData homeIcon = CupertinoIcons.home;
const IconData searchIcon = CupertinoIcons.search;
const IconData profileIcon = CupertinoIcons.profile_circled;

위와 같이 CupertinoIcons 클래스의 정적 상수를 선언하고, 그에 해당하는 아이콘을 저장합니다.

3. 아이콘 클러스터링하기

그룹화한 아이콘을 클러스터로 표현하기 위해 Row 또는 Column 위젯을 사용할 수 있습니다.

Row(
  children: [
    Icon(homeIcon),
    Icon(searchIcon),
    Icon(profileIcon),
  ],
)

위와 같이 Row 위젯을 사용하여 아이콘을 가로로 나열한 뒤, 각 아이콘을 Icon 위젯으로 감싸주면 됩니다.

결론

위의 예제를 참고하여 cupertino_icons 패키지를 이용하여 아이콘을 그룹화하고 클러스터링하는 방법을 알아보았습니다. 이것은 iOS 스타일의 아이콘을 효율적으로 사용할 수 있는 방법 중 하나입니다. Flutter 개발에서 cupertino_icons 패키지를 적극적으로 활용해보세요!

참고: Cupertino Icons